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

So I have this nice slider script that I want to use on this page: http://tuscaroratackle.com/rods for several instances on the page. (In other words each rod posting will have it's own slider, a total of about 11 sliders on the page)

所以我想在这个页面上使用这个漂亮的滑块脚本：http://tuscaroratackle.com/rods页面上的几个实例。 （换句话说，每个棒张贴都有自己的滑块，页面上总共有大约11个滑块）

In order to run the script I have to include this function declaration:

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

$(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...
  });

So the question here (is a jQ noob question I know) is can I combine those lines into one by adding all the ID selectors into the first function? And if so, what would be the proper format for writing it that way?

所以这里的问题（我知道的是一个jQ noob问题）是否可以通过将所有ID选择器添加到第一个函数中来将这些行组合成一个？如果是这样，以这种方式编写它的正确格式是什么？

6 个解决方案

#1

You can also use a class:

你也可以使用一个类：

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

The slider will now be applied to all/any elements having the class rod-slider.

滑块现在将应用于具有类别杆滑块的所有/任何元素。

If you want/need to use ids, you can do so by separating them with a comma:

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

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

Or you can use the add method.

或者您可以使用add方法。

If you don't want to modify you current html, you can use the starts with selector:

如果您不想修改当前的html，可以使用带有选择器的启动：

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

#2

You can use the starts-with selector

您可以使用starts-with选择器

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

This translates to select all elements that have an id attribute that starts with rod-slider

这转换为选择具有以rod-slider开头的id属性的所有元素

You can improve the performance of this if you know the tag name is the same for all elements. For example if they are all divs you could write it as

如果您知道所有元素的标记名称相同，则可以提高性能。例如，如果它们都是div，你可以把它写成

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

for better performance..

为了更好的表现..

#3

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

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

#4

Give them all a common class, then use a .class selector, like this:

给它们一个公共类，然后使用.class选择器，如下所示：

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

#5

You can add a class and select them all together. For example if they are DIVs you can just do this way

您可以添加一个类并一起选择它们。例如，如果他们是DIV，你可以这样做

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

and

和

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

#6

You could do:

你可以这样做：

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

or just use the class selector...

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

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