是否有更短的方式来编写此脚本？(定位多个元素以运行相同的功能)

Question

所以我想在这个页面上使用这个漂亮的滑块脚本:http : //tuscaroratackle.com/rods页面上的几个实例.(换句话说,每个杆子张贴都有自己的滑块,页面上共有大约11个滑块)

为了运行脚本,我必须包含这个函数声明:

$(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 noob问题)是否可以通过将所有ID选择器添加到第一个函数中来将这些行组合成一个？如果是这样,以这种方式编写它的正确格式是什么？

Answer 1

你也可以使用一个类:

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

滑块现在将应用于具有该类的所有/任何元素rod-slider.

如果你想/需要使用id,你可以用逗号分隔它们:

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

或者您可以使用该add方法.

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

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