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

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 菜鸟问题）我可以通过将所有 ID 选择器添加到第一个函数中来将这些行合并为一个吗？如果是这样，那么以这种方式编写的正确格式是什么？

Answer 1

您还可以使用类：

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

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

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

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

或者您可以使用 <代码>添加方法。

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

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

Answer 2

您可以使用 starts-with 选择

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

器翻译为选择具有以 rod-slider 开头的 id 属性的所有元素。

如果您知道所有元素的标签名称都相同，则可以提高此操作的性能。例如，如果它们都是 div，您可以将其写为

$("div[id^='rod-slider']").easySlider();

以获得更好的性能。

Answer 3

$(".rodslider").easySlider(); 

Where "rodslider" is a class and not an id selector. 

Answer 4

给它们一个公共类，然后使用 .class 选择器 ， 像这样：

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

Answer 5

您可以添加一个班级并一起选择它们。例如，如果它们是 DIV，您可以这样

<div class="rodslider"></div>

做

$(document).ready(function(){   
    $("div.rodslider").easySlider();
});

Answer 6

你可以这样做：

$(document).ready(function(){
    for (var i = 1; i <= 8; i++) {
        $("#rod-slider" + i).easySlider();
    }
});

或者只使用类选择器......

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