jquery - 在 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

JQuery方式是

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

但是，如果您编写的 HTML 更好，您可以做得更短……将“red”、“blue”……移动到另一个属性，并为所有属性添加一个类。就像是

<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"});

Answer 2

我正在使用类的数组，而不是使用 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");
    }
});

**您可以根据需要添加任意数量的课程。