Bild eines bestimmten angeklickten Elements ändern

Question

Ich möchte die Quelle des bestimmten angeklickten Bildelements umschalten. Aber nur für dieses Bild. Mit anderen Worten, schalten Sie nur den angeklickten ein. Wenn Sie erneut klicken, wechseln Sie zurück. Wie kann ich das mit jQuery oder JavaScript machen? Der Code kann hier gesehen werden: 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> 

Hier ist meine 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"); 
    } 
} 

Danke.

Answer 1

Sie click Ereignis hinzufügen können auf img das gibt es in ul und toggeln src von ihnen durch Speichern in data Attribut. Zum Umschalten müssen Sie Haupt src des Bildes speichern, das als data-src (oder etwas anderes) gespeichert werden kann, und Sie benötigen eine Flagge für den Zustand des Bildes wie data-clicked (oder irgendetwas anderes).

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

eine ID zu Ihrem Bild hinzufügen und dann versuchen, diese:

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

Alternativ können Sie das Bild ändern, je nach Quelle wie folgt aus:

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

Was Sie verwenden müssen, ist attr() jQuery Funktion Ihr Bild einen Klassennamen geben, dann können Sie das src in jQuery von ändern:

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

Und es anhängen zu einem Klickereignis

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