我正在努力解决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>
答案 0 :(得分:6)
我想这是因为这条线
this.container[0].innerHTML = nodeList;
将旧元素替换为没有附加任何侦听器的新元素。
您可以将侦听器追加到父元素,并使用e.target
来引用特定的子元素。