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

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

Answer 2

您可以使用starts-with选择器

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

这会转换为选择所有 id 属性的元素，该属性以 rod-slider

开头

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

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

以获得更好的表现..

Answer 3

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

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

Answer 4

给他们所有公共类，然后使用.class selector，如下所示：

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