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

【问题标题】：Is there a shorter way to write this script? (Targeting multiple elements to run the same function)有没有更短的方法来编写这个脚本？（针对多个元素运行相同的功能）
【发布时间】：2010-10-30 17:40:30
【问题描述】：

所以我想在这个页面上使用这个漂亮的滑块脚本：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 选择器添加到第一个函数中来将这些行合并为一个吗？如果是这样，那么以这种方式编写它的正确格式是什么？

【问题讨论】：

杆滑块是否恰好有一个共同的类别？如果没有，你能让他们有一个共同的班级吗？
是的，我可以给他们一份。但仍然不确定它是否可以工作，因为事实证明我需要为每张幻灯片提供它自己的唯一 ID，以便为每个控件传递唯一的 id 参数（它们由脚本生成）。

标签： jquery syntax jquery-selectors multiple-instances

【解决方案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();
});

【讨论】：

不幸的是，脚本不允许我使用类，因为它正在生成带有 ID 的控制按钮，所以我必须用单独的 ID 标记每个滑块。

【解决方案2】：

您可以使用starts-with 选择器

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

这意味着选择所有具有以 rod-slider

开头的 id 属性的元素

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

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

为了更好的性能..

【讨论】：

【解决方案3】：

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

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

【讨论】：

【解决方案4】：

给他们一个通用的类，然后使用.class selector，像这样：

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

【讨论】：

【解决方案5】：

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

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

和

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

【讨论】：

【解决方案6】：

你可以这样做：

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

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

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

【讨论】：