在jquery中创建一个数组并寻址多个元素

Question

我使用以下简单的jquery函数，但我想在具有不同类的多个元素上使用它。如何使用数组缩短代码？

$(function() {
  $('.red').attr("href", "images/gallery/redSmall.jpg");
  $('.blue').attr("href", "images/gallery/blueSmall.jpg");
  $('.green').attr("href", "images/gallery/greenSmall.jpg");
  $('.black').attr("href", "images/gallery/blackSmall.jpg");
});

感谢

Answer 1

我使用类的数组，然后用for循环将href更改为匹配元素：

$(function() {
    var classes = ['red', 'blue', 'green', 'black'];
    for(var i=0; i < classes.length; i++)
    {
        $('.'+classes[i]).attr("href", "images/gallery/"+classes[i]+"Small.jpg");
    }
});

**您可以添加任意数量的类。

Answer 2

JQuery的方式是

$(function() {
    $.each(['red', 'blue', 'green', 'black'],function(index,item){
         $('.'+item).attr("href", "images/gallery/"+item+"Small.jpg");
    });
});

然而，如果你把HTML写得更好，你可以做得更短。。。移动"红色"、"蓝色"。。。添加到另一个属性，并为所有属性添加一个类。类似的东西

<a class="color" data-color="red" href="javascript:void(0)"/>
<a class="color" data-color="blue" href="javascript:void(0)"/>
...

然后你的JS会更通用，而且很短

$(".color").each(function(item,index){ $(this).attr("href","images/gallery/"+this.attr("data-color")+"Small.jpg"});