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をより適切に記述すれば、さらに短くすることができます...「赤」、「青」...を別の属性に移動し、すべてに1つのクラスを追加します。何かのようなもの

<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 に答える