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 初心者の質問です) は、すべての ID セレクターを最初の関数に追加することによって、これらの行を 1 つに結合できますか? もしそうなら、そのように書くための適切なフォーマットは何でしょうか?

4

6 に答える 6

6

クラスを使用することもできます。

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

スライダーは、クラスを持つすべて/任意の要素に適用されますrod-slider。

ID を使用したい場合、または使用する必要がある場合は、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 に答える