1

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

4

6 回答 6

6

您还可以使用一个类：

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

滑块现在将应用于所有/任何具有 class 的元素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();
});
于 2010-10-30T17:42:39.153 回答
2

您可以使用starts-with选择器

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

这意味着选择所有具有以rod-slider开头的id属性的元素

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

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

为了更好的表现..

于 2010-10-30T17:46:08.767 回答
1 
$(".rodslider").easySlider(); 

Where "rodslider" is a class and not an id selector.
于 2010-10-30T17:43:04.327 回答
1

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

$(function(){   
  $(".rod-slider").easySlider();
});
于 2010-10-30T17:43:50.493 回答
1

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

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

和

$(document).ready(function(){   
    $("div.rodslider").easySlider();
});
于 2010-10-30T17:44:49.247 回答
1

你可以这样做：

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

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

$(document).ready(function(){
    $(".rod-slider").easySlider();
});
于 2010-10-30T17:47:43.553 回答