如何在与另一个具有相同类的页面上定位特定 div

Question

我正在创建一个基本滑块来在页面上显示产品。我想在一个页面上使用多个滑块。但很明显，当我执行该函数时，它会影响所有滑块，因为它们具有相同的类名。但是他们需要相同的css类。滑块也将具有不同的值，例如产品数量。

我想在一个页面上放置多个滑块，但该功能仅影响单击的滑块。

JsFiddle

<div class="slider-wrapper">
   <div class="slider-controls>
       <div class="prv control"> < </div>
       <div class="nxt control"> > </div>
   </div>
   <div class="slider">
      <!-- SLIDE 1--><div class="slide"><img></div>
      <!-- SLIDE 1--><div class="slide"><img></div>
      <!-- SLIDE 1--><div class="slide"><img></div>
      <!-- SLIDE 1--><div class="slide"><img></div>
   </div>
</div>

JS

$('.nxt').click(function){
   .slider{move left}
}

    $('.prv').click(function){
   .slider{move right}
}

JsFiddle

Answer 1

我认为问题在于您对所有 div 都使用 class="slide"。 使用不同的 ID 标识符

Answer 2

你有各种各样的选择。

1. 添加一个附加类唯一标识每个滑块（元素可以有多个类）。

2. 使用ids 唯一标识他们。

3. 使用它们的内容来唯一标识它们（例如，大概每个img是不同的）。

4. 按位置执行，通过.eq function：

   var firstSlider = $(".slider").eq(0);
   var secondSlider = $(".slider").eq(1);
   

   ...或:eq pseudo-selector:

   var firstSlider = $(".slider:eq(0)");
   var secondSlider = $(".slider:eq(1)");
   

   ...或者通过抓取所有这些并只是索引到集合中：

   var sliders = $(".slider");
   var firstSlider = $(sliders[0]);
   var secondSlider = $(sliders[1]);
   

5. 在响应其中一个滑块上的事件时，如果您需要知道它与同级滑块的关系，请使用index function：

   $(".sliders").on("some-event", function() {
       // Which slider am I?
       var sliderIndex = $(this).index();
   });
   

（在上面，我并不是在字面上建议为滑块使用单独的变量，只是使用变量来显示您将从每种机制中获得哪个变量。）