将相同的功能添加到多个相同名称的 div ID

如何解决将相同的功能添加到多个相同名称的 div ID

如何将相同的功能添加到 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); 
  

HTML 上一个和下一个按钮

 <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));