时间戳

首页 > 解决方案 > 水平滑块错误 - 多个具有相同类的水平滑块与本机 JavaScript ，所有滑块一起工作我如何解决它

javascript - 水平滑块错误 - 多个具有相同类的水平滑块与本机 JavaScript ，所有滑块一起工作我如何解决它

问题描述

#horizo​​ntal 滑块错误 - 多个具有相同类的水平滑块与本机 JavaScript，所有滑块协同工作我如何解决它### This First Horizo​​ntal Slider ## '''
/* 声明变量 */

    let moveRight = document.querySelectorAll('.move-right');
    let moveLeft = document.querySelectorAll('.move-left');
    let left = document.querySelector('.move-left');
    let right = document.querySelector('.move-right');
    const slides = document.querySelectorAll('.slide');
    let x = 0;

    /* Function to slide Sliders Divs To left when click on arrow with class = ".move- 
  left"*/
    for(let i = 0; i < moveLeft.length; i++){
     moveLeft.forEach(function(left){
        left.addEventListener('click', function(){

        x++;
        for (let i = 0; i < slides.length; i++){
            if(x==0) {slides[i].style.left = "0px";}
            if(x==1) {slides[i].style.left = "-320px";}
            if(x==2) {slides[i].style.left = "-640px";}
            if(x==3) {slides[i].style.left = "-960px";}
            if(x==4) {slides[i].style.left = "-1280px";}
            if(x==5) {slides[i].style.left = "-1600px";}

            if(x>5) {x=5;}
        }
      })});
    }
   /* Function to slide Sliders Divs To Right  when click on arrow with class = ".move- 
  right"*/

    for(let i = 0; i < moveRight.length; i++){
      moveRight.forEach(function(right){
        right.addEventListener('click', function(){

        x--;
        for (let i = 0; i < slides.length; i++){
            if(x==0) {slides[i].style.left = "0px";}
            if(x==1) {slides[i].style.left = "-320px";}
            if(x==2) {slides[i].style.left = "-640px";}
            if(x==3) {slides[i].style.left = "-960px";}
            if(x==4) {slides[i].style.left = "-1280px";}

       if(x < 0) {x=0;}

  }
 })});
}

'''

标签： javascripthtmlcssdom

解决方案

您尚未添加 HTML 代码，但我假设您有一个 section 或 div 标签，其中有您的幻灯片和左/右按钮。您可以稍微修改您的代码，以便仅在容器中定位幻灯片。这样，即使您有多个滑块，也只有您单击其按钮的那个滑块才能工作。

left.addEventListener('click', function(event){
    // Assuming the parent div has a class of container
    const container = event.target.closest('.container');
    // Selecting only those slides that are a part of the container where the button has been clicked
    const slides = container.querySelectorAll('.slides');
    // Rest of your logic goes here
});

HTML将是这样的

<div class='container'>
    <div class='slide'>Content here</div>
    <button class='move-left'>Left</button>
    <button class='move-right'>Right</button>
</div>

注意：closest()在 IE 中不起作用，如果您希望支持 IE，可能需要为其添加 polyfill。

推荐阅读