问题描述
如何将相同的功能添加到 samge 页面上多个滑块上的多个上一个和下一个按钮?我试图遍历每个名为 #prev 和 #next 的 div。
脚本
function prevSlide() {
if(count > 1) {
count = count - 2;
sliderList.style.left = '-' + count * sliderWidth + 'px';
count++;
}else if(count == 1) {
count = items - 1;
sliderList.style.left = '-' + count * sliderWidth + 'px';
count++;
}
}
function nextSlide() {
if(count < items) {
sliderList.style.left = '-' + count * sliderWidth + 'px';
count++;
}else if(count == items) {
sliderList.style.left = '0px';
count = 1;
}
}
document.getElementById("prev").addEventListener('click',prevSlide);
document.getElementById("next").addEventListener('click',nextSlide);
<div id="prev"><i class="fas fa-angle-left"></i></div>
<div id="next"><i class="fas fa-angle-right"></i></div>
工作代码示例以便更好地理解
https://jsfiddle.net/ehvgLmxu/
解决方法
就像另一个答案所说的,您不能使用 ID,因为它们在页面上必须是唯一的。尝试使您的代码通用时还有其他多个问题。
我在 https://jsfiddle.net/t248qymz/2/ 做了一个几乎可以工作的例子 - 并不完美,并且 count
有一些错误,但我希望这一点能够得到解决。
要带走的关键是:当您在页面上处理同一事物的多个实例时,请跟踪您所指的是哪个元素。您始终需要定位与点击元素相关的相关元素。我建议您应该从事件对象(例如 e.target
或 e.currentTaget
)中获取所有元素引用,而不是将它们缓存到变量中。
另外,请在发布或继续编码之前正确格式化您的代码。它会帮助我们和你 - 相信我。
,您可以将 id 更改为 class 然后使用 getElementsByClassName()
函数,它会返回一个名为 nodeList 的东西,您可以在其上使用 forEach()
方法。它将遍历具有类名的每个元素并对其进行处理。
将 html 更改为:
<div class="prev"><i class="fas fa-angle-left"></i></div>
<div class="next"><i class="fas fa-angle-right"></i></div>
function prevSlide() {
if (count > 1) {
count = count - 2;
sliderList.style.left = '-' + count * sliderWidth + 'px';
count++;
} else if (count == 1) {
count = items - 1;
sliderList.style.left = '-' + count * sliderWidth + 'px';
count++;
}
}
function nextSlide() {
if (count < items) {
sliderList.style.left = '-' + count * sliderWidth + 'px';
count++;
} else if (count == items) {
sliderList.style.left = '0px';
count = 1;
}
}
const prevBtn = document.getElementsByClassName('prev');
const nextBtn = document.getElementsByClassName('next');
prevBtn.forEach(btn => btn.addEventListener('click',prevSlide));
nextBtn.forEach(btn => btn.addEventListener('click',nextSlide));