函数'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引用特定的子元素.