jquery - 有没有更短的方法来编写这个脚本？ (针对多个元素运行相同的功能)

Question

所以我想在此页面上使用这个漂亮的 slider 脚本:http://tuscaroratackle.com/rods页面上的多个实例。 (换句话说，每个杆发布都会有自己的 slider ，页面上总共大约有11个 slider )

为了运行脚本，我必须包含此函数声明:

$(document).ready(function(){   
    $("#rod-slider1").easySlider();
     $("#rod-slider2").easySlider();
     $("#rod-slider3").easySlider();
     $("#rod-slider4").easySlider();
     $("#rod-slider5").easySlider();
     $("#rod-slider6").easySlider();
     $("#rod-slider7").easySlider();
     $("#rod-slider8").easySlider();
     ...etc...
  });

所以这里的问题(我知道这是一个 jQ 菜鸟问题)是我可以通过将所有 ID 选择器添加到第一个函数中来将这些行组合成一个吗？如果是这样，那么正确的格式是什么？

Answer 1

您还可以使用类:

$(document).ready(function(){   
    $(".rod-slider").easySlider();
});

slider 现在将应用于具有类 rod-slider 的所有/任何元素。

如果您想要/需要使用 ids，可以通过用逗号分隔它们来实现:

$(document).ready(function(){   
    $("#rod-slider1, #rod-slider2, #rod-slider3, #etc").easySlider();
});

或者您可以使用add方法。

如果您不想修改当前的html，可以使用starts with选择器:

$(document).ready(function(){   
    $("[id^='rod-slider']").easySlider();
});