Question

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

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

<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

你有各种各样的选择。

添加一个唯一标识每个滑块的附加类（元素可以有多个类）。
使用id来唯一标识它们。
使用他们的内容来唯一标识它们（例如，大概每个img都不同）。

通过.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]);

在响应某个滑块上的某个事件时，如果您需要知道它与其兄弟姐妹相关哪一个，请使用index function：
```
$(".sliders").on("some-event", function() {
    // Which slider am I?
    var sliderIndex = $(this).index();
});
```

（在上文中，我并没有真正建议为滑块使用单个变量，只是使用变量来显示您从每个机制获得的变量。）

Answer 2

我认为问题在于你使用class =＆＃34; slide＆＃34;为你所有的div。使用不同的ID标识符

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

2 个答案: