jQuery使此代碼更短與數組

-1

任何人都可以幫我修改這個jQuery代碼更短嗎？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); 
    } 
};

這些taget標識具有相同的前綴（#blinker）和隨後的序列號。我認爲數組函數會幫助...但我不知道如何。這些div將在未來增加或減少。

來源

2012-09-25 norixxx

你可以使用一個"attribute starts-with" selector：

$("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-25 12:00:43

哇！這是如此快速和聰明。我無法回想起這種方法。 Thaaaax！ – norixxx

@norixxx - 不客氣，很高興我可以幫助:) –

這裏是一個解決方案：

$("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-25 12:01:10 VisioN

Thanx。簡單而智能的解決方案 – norixxx

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

您可以使用此。 id^=表示以「」開頭的任何ID。通過這種方式，您可以確定代碼的工作原理，而無需在每次修改HTML時修改它。

你可以做的另一件好事是爲他們聲明一個類，並用它來代替ID。

來源

2012-09-25 12:02:06 Salketer

我會爲所有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); 
    } 
};

也就是說，以替代「屬性開始，以」。

來源

2012-09-25 12:04:23

jQuery使此代碼更短與數組

回答

相關問題