在图像上切换 src 属性

Posted 2023-03-15

【中文标题】在图像上切换 src 属性

【英文标题】：Toggle src-attribute on image

【发布时间】：2011-06-08 09:49:39

【问题描述】：

点击锚点时，有没有办法在两个值之间切换图像的 src 属性？

像这样：

$('a#some-anchor').click(function() 
// code here that toggles between two image src's e.g. "images/some-image1.jpg" and "images/some-image2.jpg"
);

【参考方案1】：

查看这个 sn-p：

var plus = 'https://d30y9cdsu7xlg0.cloudfront.net/png/5805-200.png';
var minus = 'https://d30y9cdsu7xlg0.cloudfront.net/png/5802-200.png';

$('#magic-toggle').click(function() 
  if ($('.fun-img').attr('src') === plus) 
    $('.fun-img').attr('src', minus);
   else 
    $('.fun-img').attr('src', plus)
  
)

.fun-img 
  width: 80px;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<img src="https://d30y9cdsu7xlg0.cloudfront.net/png/5805-200.png" class="fun-img" id="magic-toggle">

【参考方案2】：

$("img").bind("click", function() 
  var src = ($(this).attr("src") === "img1_on.jpg")
                ? "img2_on.jpg" 
                : "img1_on.jpg";
  $(this).attr("src", src);
);

取自这里：

Changing the image source using jQuery

【参考方案3】：

不知道你的图片在哪里，但是：

$('a#some-anchor').click(function() 
    var img = $('selector');

    if (img.attr('src').match(/image1/)) 
        img.attr('src', 'images/some-image2.jpg');
     else 
        img.attr('src', 'images/some-image1.jpg');
    
);

【参考方案4】：

$('a#some-anchor').click(function() 
    var img = $('#yourIMG');

    var img1 = "images/some-image1.jpg";
    var img2 = "images/some-image2.jpg";

    img.attr('src', img.attr('src') == img1 ? img2 : img1);
);

【参考方案5】：

使用内部data() 函数可以工作：

$('a#some-anchor').click(function() 
  var img = $(this);
  if ( img.data('active') ) 
    img.attr('src', 'images/some-image1.jpg');
    img.data('active', false);
   else 
    img.attr('src', 'images/some-image2.jpg');
    img.data('active', true);
  
);