Javascript 允许多个CSS类使用相同的JS函数（滑动旋转木马）

我试图在同一页上多次实现Slick slider，每个实例都使用“slider Synching”。现在我遇到的问题是，在下面的代码中，同步文本会随着两个滑块进行调整：

试验
html，正文{
保证金：0；
填充：0；
}
* {
框大小：边框框；
}
.人{
宽度：50%；
保证金：0px自动；
}
.个人img{
宽度：100%；
保证金：自动；
}
.滑块{
宽度：90%；
保证金：20px自动；
}
.滑滑梯{
利润率：0px 20px；
不透明度：0.5；
}
.滑溜式img{
宽度：100%；
}
.史莱克·普雷夫：之前，
.滑头下一个：之前{
颜色：黑色；
}
.圆滑中心{
不透明度：1；
}
}
1.
2.
3.
4.
5.
6.
7.
8.
9
1.
2.
3.
4.
5.
6.
7.
8.
9
$（文档）.on（'ready'，function（）{
美元（“.regular”）。光滑({
点：错，
无限：是的，
centerMode：对，
中心填充：“40px”，
幻灯片放映：5，
幻灯片滚动：1，
懒洋洋的：“ondemand”，
asNavFor:“。滑块用于”，
焦点选择：正确
});
$（'.slider for'）。光滑({
幻灯片放映：1，
幻灯片滚动：1，
箭头：错，
是的，
asNavFor:“.regular”
});
});

您可以使用

.each（）

或

ForEach

来完成，简单示例：

$( ".slider-for" ).each(function() {
  $( this ).slick({ ... });
});

---

供参考：

这是最终Javascript的样子：

<script type="text/javascript">
$(document).on('ready', function() {
  var config = { dots: false,
                 infinite: true,
                 centerMode: true,
                 centerPadding: '40px',
                 slidesToShow: 5,
                 slidesToScroll: 1,
                 lazyLoad: 'ondemand',
                 focusOnSelect:true
               };
  var navFor = [];
  $( ".slider-for" ).each(function(index) {
      $( this ).slick({
        slidesToShow: 1,
        slidesToScroll: 1,
        arrows: false,
        fade: true,
        swipe: false,
        touchMove: false,
        draggable: false
      });
      navFor[index] = this;
  });
  $( ".regular" ).each(function(index) {
      config.asNavFor = navFor[index];
      $( this ).slick(config);
      //console.log(this);
  });
});

$（文档）.on（'ready'，function（）{
var config={dots:false，
无限：是的，
centerMode：对，
中心填充：“40px”，
幻灯片放映：5，
幻灯片滚动：1，
懒洋洋的：“ondemand”，
焦点选择：正确
};
var-navFor=[]；
$（“.slider for”）.each（函数（索引）{
美元（这个）({
幻灯片放映：1，
幻灯片滚动：1，
箭头：错，
是的，
刷：错，
touchMove:false，
可拖动：错误
});
navFor[索引]=此；
});
$（“.regular”）。每个（函数（索引）{
config.asNavFor=navFor[index]；
$（此）.slick（配置）；
//console.log（this）；
});
});

---

如果您想在一个页面中使用多个滑动条，请利用

$（此）

，但如果您也使用滑动条事件，您可以获得以下帮助：

var slider = $(".bhi-slider"),
    status = $('.slider-number'),
    progressBarLabel = $( '.slider__label' );

slider.each(function(index){
    $(this).slick({
        infinite: true,
        dots: false,
        autoplay: true,
        arrows: true,
        speed: 300,
        slidesToShow: 1,
        slidesToScroll: 1,
        nextArrow: $('.next-slide')[index],
        prevArrow: $('.prev-slide')[index],
    });

    $(this).on('init', function(slick){
        $(progressBarLabel[index]).css('width', 100 / slick.isTrigger + '%');
    });

    $(this).on('beforeChange', function(event, slick, currentSlide, nextSlide){ 
        var constNum = ( (1) / (slick.slideCount) ) * 100;
        var calc = ( (nextSlide) / (slick.slideCount) ) * 100;
            calc += constNum;
        $(progressBarLabel[index]).css('width', calc + '%');
    });

    $(this).on('init reInit afterChange', function (event, slick, currentSlide, nextSlide){
        var i = (currentSlide ? currentSlide : 0) + 1;
        $(status[index]).html('<span class="number-slide">' + i + '</span><span class="total-slide">' + slick.slideCount + '</span>');
    });
});

var slider=$（“.bhi slider”），
状态=$（“.滑块编号”），
progressBarLabel=$（'.slider__标签'）；
滑块。每个（函数（索引）{
美元（这个）({
无限：是的，
点：错，
自动播放：对，
箭头：是的，
速度:300,，
幻灯片放映：1，
幻灯片滚动：1，
下一行：$（'.next slide'）[索引]，
prevArrow:$（'.prev幻灯片'）[索引]，
});
$（this）.on（'init'，函数（slick）{
$（progressBarLabel[index]）.css（'width'，100/slick.isTrigger+'%'）；
});
$（this）.on（'beforeChange'，函数（event，slick，currentSlide，nextSlide）{
var constNum=（（1）/（slick.slideCount））*100；
var calc=（（下一个滑动）/（滑动滑轨））*100；
calc+=constNum；
$（progressBarLabel[index]）.css（'width'，calc+'%'）；
});
$（this）.on（'init reInit afterChange'，函数（event，slick，currentlide，nextSlide）{
变量i=（当前幻灯片？当前幻灯片：0）+1；
$（状态[索引]）.html（“”+i+“”+slick.slideCount+“”）；
});
});

谢谢Rav。我使用了.each函数，并使其与旋转木马一起工作，但是，由于“asNavFor”位是两个不同的for循环，如何使其交叉引用也让我感到困惑$（“.regular”）.each（函数（索引）{$（this.slick（{…asNavFor:'.slider for'，…}）；}）$（“.slider for”）.each（函数（索引）{$（this.slick（{…}）；}）；我尝试过使用索引和重命名类，但没有做到这一点。然后添加属性并以相同的方式调用第二个循环。例如

config={dots:false，infinite:true，centerMode:true，centerPadding:'40px'，slidesToShow:5，slidesToScroll:1，lazyLoad:'ondemand'，focusOnSelect:true}

然后执行

config.asNavFor=”。滑块用于“

谢谢，伙计。你的回答让我明白了！我使用了config变量，还定义了一个“NavFor”数组，首先循环通过“slider for”类，每次使用的索引将“this”分配给一个新的数组元素。然后循环通过“regular”类，每次使用config.asNavFor将其分配给相应的数组索引：）。。。虽然不是世界上最漂亮的代码，但它可以用于原型：D