関数 'onclick'は一度しか動作しません

Question

私はonclick関数の問題とDOMのhtmlを置き換えるのに苦労しています。 この関数は以下の責任を負います。 1. DOMから全リストを読み込みます。 2. IDに応じて順番を変更します。クリックから取得し、新しいリストとして表示します。

残念ながら、この機能は1回だけ機能してから停止します。 アドバイスをお寄せください。

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を使用して特定の子要素を参照できます。