Question

有人可以帮我修改这个jQuery代码吗？

HTML code：

 <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 ID具有相同的前缀（#blinker），后跟顺序号。我认为数组函数会有所帮助......但我不知道如何。这些div将来会增加或减少。

Answer 1

您可以使用"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函数的速度。

Answer 2

这是一个解决方案：

$("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);

Answer 3

我会为所有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);
    }
};

这是“属性开始 - 用”的替代方法。

Answer 4

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

你可以用它。 id ^ =表示以“”开头的任何ID。这样，您可以确保代码正常运行，而无需在每次修改HTML时对其进行修改。

你可以做的另一件好事是为他们宣布一个类，并使用它而不是ID。

jQuery使用数组缩短了这段代码

4 个答案: