0

我正在使用以下简单的 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");

});

谢谢你

4

2 回答 2

2

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"});
于 2012-08-20T15:29:54.873 回答
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");
    }
});

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

于 2012-08-20T15:25:39.090 回答