Question

我在div中有图像。我希望他们只需点击一下按钮即可更改其来源。现在我有了这个，工作正常：

var isSwapped = false

$('.swapbutton').click(function swap(){
    if (isSwapped == false){
      $('.img1').attr('src','img11.png');
      $('.img2').attr('src','img22.png');
      etc.etc.
      isSwapped = true
    }
    else{
      $('.img1').attr('src','img1.png');
      $('.img2').attr('src','img2.png');
      etc.etc.
      isSwapped = false
    }
});

当我有大量图像时，是否有更清洁/更整洁的代码可供使用，以便我不必定义每一个源更改？

Answer 1

假设图像形式为： html <img src="img1.png" data-alternate-src="img2.png" /> 你可以使用：

 $('.swapButton').click(function swap(){
      $('img').each(function () {
            var $this = $(this),
                   newSrc = $this.attr('data-alternate-src');

            $this.attr('data-alternate-src', $this.attr('src'));
            $this.attr('src', newSrc);
     });
 });

Answer 2

您可以这样使用：

$('img').each(function(i,v){
    $(this).attr('src','img'+i+i);//for second case just use 'img'+i;
});

用jquery交换多个属性的清洁代码

2 个答案: