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

Question

如何为 samge 页面上多个滑块上的多个上一个和下一个按钮添加相同的功能？我试图遍历每个 div 名为 #prev 和 #next.

脚本

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/

Answer 1

你可以把id改成class然后用getElementsByClassName()函数，它会return一个叫nodeList的东西，你可以在其上使用 forEach() 方法。这将遍历每个具有 class 名称的元素并对其进行处理。

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

Answer 2

就像其他答案所说的那样，您不能使用 ID，因为它们需要在 page.There 上是唯一的，在尝试使您的代码通用时还有许多其他问题。

我在 https://jsfiddle.net/t248qymz/2/ 做了一个几乎可以工作的例子 - 不完美并且 count 有一些错误，但我希望大家能明白这一点。

要记住的关键是：当您在页面上处理同一事物的多个实例时，请跟踪您指的是哪个元素。您始终需要针对与单击元素相关的相关元素。我建议您应该从事件对象（类似于 e.target 或 e.currentTaget）获取所有元素引用，而不是将它们缓存到变量中。

此外，请在发布或继续编码之前正确格式化您的代码。它将帮助我们和您 - 相信我。

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

Add same function to multiple same name div IDs

javascript

jquery

loops

function

slider