在圖像上切換src屬性

Question

當單擊錨點時，是否有方法在兩個值之間切換圖像的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" 
}); 

Answer 1

$("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

Answer 2

使用內部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); 
    } 
}); 

Answer 3

$('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); 
}); 

Answer 4

不知道你在哪裏形象不過是：

$('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'); 
    } 
}); 

Answer 5

結帳這個片段：

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">