javascript - jQuery 使用数组使这段代码更短

Question

谁能帮我修改这个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 将来会增加或减少。

Answer 1

您可以使用“属性开始于”选择器：

$("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。