函數“ onclick”僅工作一次

Question

我正努力解決onclick函數的問題並在DOM中替換html。 該函數負責：1.從DOM中讀取整個列表，2.將其順序更改為我從點擊獲得的ID，然后將其顯示為新列表。

不幸的是，此功能僅工作一次，然后停止。 將不勝感激任何建議。

class Slider {
  constructor() {
    this.settings = { center: 3 };
    this.container = document.getElementsByClassName('slider__container');
    this.slides = this.container[0].querySelectorAll('.slider__card');
    this.currentSlide = '';
    this.onSlideClick();
  }

  onSlideClick() {
    this.slides.forEach(slide => {
      return slide.addEventListener('click', () => {
        this.currentSlide = parseInt(slide.dataset.slideId);
        this.createNewList(this.currentSlide);
      });
    });
  }

  createNewList(curr) {
    const { center } = this.settings;
    const { slides } = this;
    let nodeList = '';
    let newList = [];
    let diff = curr - center;

    for (let i = 0; i < slides.length; i++) {
      if (i + diff < 0) newList.push(slides[i + curr + center - 1]);
      else newList.push(slides[(i + diff) % 5]);
    }

    newList.forEach(item => (nodeList = nodeList + item.outerHTML));
    this.container[0].innerHTML = nodeList;
    nodeList = '';
    newList = [];
    console.log('done');
  }
}

export default Slider;

的index.html

    <ul class="slider__container">
      <!-- 1 slide -->
      <li class="slider__card slider__margin-t--1" data-slide-id="1">
        <div class="slider__card-pic">
          <img class="shape__x-small shape--rotate-10 shape--absolute slider__polygon" src="./images/shape-polygon-violet.svg" alt="Polygon Shape">
          <img class="shape--absolute slider__icon" src="./images/icon-note.svg" alt="Note and pen">
        </div>
        <div class="slider__card-text">
          <h3>Excepteur sint occaecat</h3>
          <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Minus debitis laboriosam ea, magni nulla libero.</p>
        </div>
      </li>
      <!-- 2 slide -->
      <li class="slider__card slider__margin-t--2" data-slide-id="2">
        <div class="slider__card-pic">
          <img class="shape__x-small shape--rotate-10 shape--absolute slider__polygon" src="./images/shape-polygon-violet.svg" alt="Polygon Shape">
          <img class="shape--absolute slider__icon" src="./images/icon-chart.svg" alt="Chart panel">
        </div>
        <div class="slider__card-text">
          <h3>Doloribus eum</h3>
          <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Minus debitis laboriosam ea, magni nulla libero.</p>
        </div>
      </li>
      <!-- 3 slide -->
      <li class="slider__card slider__margin-t--3" data-slide-id="3">
        <div class="slider__card-pic">
          <img class="shape__x-small shape--rotate-10 shape--absolute slider__polygon" src="./images/shape-polygon-violet.svg" alt="Polygon Shape">
          <img class="shape--absolute slider__icon" src="./images/icon-settings.svg" alt="Settings panel">
        </div>
        <div class="slider__card-text">
          <h3>Debitis omnis asperiores</h3>
          <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Minus debitis laboriosam ea, magni nulla libero.</p>
        </div>
      </li>
      <!-- 4 slide -->
      <li class="slider__card slider__margin-t--4" data-slide-id="4">
        <div class="slider__card-pic">
          <img class="shape__x-small shape--rotate-10 shape--absolute slider__polygon" src="./images/shape-polygon-violet.svg" alt="Polygon Shape">
          <img class="shape--absolute slider__icon" src="./images/icon-thunder.svg" alt="Thunder">
        </div>
        <div class="slider__card-text">
          <h3>Asperiores impedit obcaecati</h3>
          <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Minus debitis laboriosam ea, magni nulla libero.</p>
        </div>
      </li>
      <!-- 5 slide -->
      <li class="slider__card slider__margin-t--5" data-slide-id="5">
        <div class="slider__card-pic">
          <img class="shape__x-small shape--rotate-10 shape--absolute slider__polygon" src="./images/shape-polygon-violet.svg" alt="Polygon Shape">
          <img class="shape--absolute slider__icon" src="./images/icon-play.svg" alt="Thunder">
        </div>
        <div class="slider__card-text">
          <h3>Temporary </h3>
          <p>Lorem ipsum dolor sit amet, elit. Minus debitis laboriosam ea, magni nulla libero.</p>
        </div>
      </li>
    </ul>

Answer 1

我想是因為這條線

this.container[0].innerHTML = nodeList;

您用沒有附加任何偵聽器的新元素替換舊元素。

您可以將偵聽器附加到父元素，然后使用e.target引用特定的子元素。