更改特定點擊元素的圖片

Question

我想切換點擊特定圖片元素的src。但是，只爲了那個形象。換句話說，只切換一個點擊。如果再次點擊，然後改回來。我怎樣才能用jQuery或JavaScript來做到這一點。該代碼可以在這裏看到：https://codepen.io/centem/pen/NgKEmG

<!-- 
When image clicked change image to: 
https://www.centerpointe.com/v2/wp-content/uploads/2014/01/red-x.png 
--> 

<ul class="list-unstyled"> 

<li>Username<span class="pull-right"> 
<img src="https://upload.wikimedia.org/wikipedia/commons/8/87/Google_Chrome_icon_%282011%29.png"></span><span class="pull-right"> 
<img src="http://pngimg.com/uploads/firefox/firefox_PNG16.png"></span><span class="pull-right"> 
<img src="https://ma.ttias.be/wp-content/uploads/2015/07/internet-explorer-logo.png"></span></li> 

<li>Username<span class="pull-right"> 
<img src="https://upload.wikimedia.org/wikipedia/commons/8/87/Google_Chrome_icon_%282011%29.png"></span><span class="pull-right"> 
<img src="http://pngimg.com/uploads/firefox/firefox_PNG16.png"></span><span class="pull-right"> 
<img src="https://ma.ttias.be/wp-content/uploads/2015/07/internet-explorer-logo.png"></span></li></li> 

<li>Username<span class="pull-right"> 
<img src="https://upload.wikimedia.org/wikipedia/commons/8/87/Google_Chrome_icon_%282011%29.png"></span><span class="pull-right"> 
<img src="http://pngimg.com/uploads/firefox/firefox_PNG16.png"></span><span class="pull-right"> 
<img src="https://ma.ttias.be/wp-content/uploads/2015/07/internet-explorer-logo.png"></span></li></li> 

</ul> 

這裏是我的jQuery：

function handler(event) { 
    var target = $(event.target); 
    if (target.is("img")) { 
    target.src().toggle(
"https://www.centerpointe.com/v2/wp-content/uploads/2014/01/red-x.png"); 
    } 
} 

謝謝。

Answer 1

您可以在img添加click事件存在於ul中，並通過保存在data屬性中來切換src。爲了切換，你需要保存可以保存爲data-src（或其他任何東西）的圖像的主要src，並且你需要像data-clicked（或任何其他）的圖像狀態的標誌。

$('ul.list-unstyled li img').on('click', function(){ 
 
    var clicked = $(this).data('clicked'); 
 
    if(clicked === '1') { 
 
    $(this).attr('src', $(this).data('src')) 
 
    $(this).data('clicked', '0') 
 
    } else { 
 
    $(this).data('src', $(this).attr('src')) 
 
    $(this).attr('src', "https://www.centerpointe.com/v2/wp-content/uploads/2014/01/red-x.png"); 
 
    $(this).data('clicked', '1') 
 
    } 
 
})

\t \t img { 
 
\t \t \t height: 25px; 
 
     padding-right: 4px; 
 
\t \t } 
 
\t \t li { 
 
\t \t \t margin: 4px; 
 
     clear: both; 
 
\t \t } 
 
\t \t li:nth-child(odd) { 
 
\t \t \t background: #f0f0f5; 
 
\t \t }

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/> 
 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<!-- 
 
When image clicked change image to: 
 
https://www.centerpointe.com/v2/wp-content/uploads/2014/01/red-x.png 
 
--> 
 

 
<ul class="list-unstyled"> 
 

 
<li>Username<span class="pull-right"> 
 
<img src="https://upload.wikimedia.org/wikipedia/commons/8/87/Google_Chrome_icon_%282011%29.png"></span><span class="pull-right"> 
 
<img src="http://pngimg.com/uploads/firefox/firefox_PNG16.png"></span><span class="pull-right"> 
 
<img src="https://ma.ttias.be/wp-content/uploads/2015/07/internet-explorer-logo.png"></span></li> 
 
\t 
 
<li>Username<span class="pull-right"> 
 
<img src="https://upload.wikimedia.org/wikipedia/commons/8/87/Google_Chrome_icon_%282011%29.png"></span><span class="pull-right"> 
 
<img src="http://pngimg.com/uploads/firefox/firefox_PNG16.png"></span><span class="pull-right"> 
 
<img src="https://ma.ttias.be/wp-content/uploads/2015/07/internet-explorer-logo.png"></span></li></li> 
 

 
<li>Username<span class="pull-right"> 
 
<img src="https://upload.wikimedia.org/wikipedia/commons/8/87/Google_Chrome_icon_%282011%29.png"></span><span class="pull-right"> 
 
<img src="http://pngimg.com/uploads/firefox/firefox_PNG16.png"></span><span class="pull-right"> 
 
<img src="https://ma.ttias.be/wp-content/uploads/2015/07/internet-explorer-logo.png"></span></li></li> 
 

 
</ul>

Answer 2

的ID添加到您的圖像，然後試試這個：

$(function() { 
    $("#yourImage").onClick(function() { 
      $(this).attr("src", "https://www.centerpointe.com/v2/wp-content/uploads/2014/01/red-x.png"); 
     }); 
}); 

或者，你可以根據源這樣就改變形象：

$(function() { 
     $("img").onClick(function() { 
       if ($(this).attr("src") == "OriginalSource") 
        $(this).attr("src", "https://www.centerpointe.com/v2/wp-content/uploads/2014/01/red-x.png"); 
      }); 
    }); 

Answer 3

你需要使用什麼是jQuery的attr()功能 給你的圖像需要的類別名稱，那麼你可以通過改變SRC jQuery中：

$(".image1").attr("src","https://www.centerpointe.com/v2/wp-content/uploads/2014/01/red-x.png"); 

和附帶它點擊事件

$(".image1").click(function(){ 
    $('.image1').attr('src','https://www.centerpointe.com/v2/wp-content/uploads/2014/01/red-x.png'); 
});