-1

このjQueryコードを短く変更するのを手伝ってくれる人はいますか?

HTML コード:

 <div id="blinker1"><img src="aaa.png" /></div>
 <div id="blinker2"><img src="bbb.png" /></div>
 <div id="blinker3"><img src="ccc.png" /></div>
 <div id="blinker4"><img src="ddd.png" /></div>
 <div id="blinker5"><img src="eee.png" /></div>

jQuery コード:

function smBlink(){
    //blink 3times
    for(i=0;i<3;i++) {
        $("#blinker1, #blinker2, #blinker3, #blinker4, #blinker5").fadeTo('normal', 0.3).fadeTo('normal', 1.0);
    }
};

これらのターゲット ID には同じプレフィックス (#blinker) があり、その後に連番が続きます。配列関数が役立つと思います...しかし、方法がわかりません。これらの div は、将来的に増減されます。

4

4 に答える 4

12

「属性で始まる」セレクターを使用できます。

$("div[id^='blinker']").fadeTo('normal', 0.3).fadeTo('normal', 1.0);

これにより、必要に応じて ID が一致する要素を追加/削除できます。

マークアップを変更できる場合は、id属性を共有クラス名に置き換える方が効率的です。その後、通常のクラス セレクターを使用できます。

$(".blinker").fadeTo('normal', 0.3).fadeTo('normal', 1.0);

getElementsByClassNameこのアプローチは、セレクター エンジンがネイティブ関数の速度を利用できることを意味します。

于 2012-09-25T12:00:43.030 に答える
2

ここに1つの解決策があります:

$("div[id^='blinker']").fadeTo("normal", 0.3).fadeTo("normal", 1.0);

別のより正確な解決策を次に示します。

$("div").filter(function() {
    return /^blinker\d+$/.test(this.id);
}).fadeTo("normal", 0.3).fadeTo("normal", 1.0);
于 2012-09-25T12:01:10.530 に答える
2

すべての div に共通のクラスを追加します。

 <div class="blinker" id="blinker1"><img src="aaa.png" /></div>
 <div class="blinker" id="blinker2"><img src="bbb.png" /></div>
 <div class="blinker" id="blinker3"><img src="ccc.png" /></div>
 <div class="blinker" id="blinker4"><img src="ddd.png" /></div>
 <div class="blinker" id="blinker5"><img src="eee.png" /></div>

そしてより:

function smBlink(){
    //blink 3times
    for(i=0;i<3;i++) {
        $(".blinker").fadeTo('normal', 0.3).fadeTo('normal', 1.0);
    }
};

これは、「attribute starts-with」に代わるものです。

于 2012-09-25T12:04:23.713 に答える
0
function smBlink(){
    //blink 3times
    for(i=0;i<3;i++) {
        $('[id^="blinker"]').fadeTo('normal', 0.3).fadeTo('normal', 1.0);
    }
};

これを使用できます。id^= は "" で始まる任意の ID を意味します。これにより、HTML を変更するたびにコードを変更しなくても、コードが機能することを確認できます。

あなたができるもう1つの良いことは、それらのクラスを宣言し、IDの代わりにそれを使用することです.

于 2012-09-25T12:02:06.383 に答える