Change image of specific clicked element

Question

I would like to toggle the src of the specific image element clicked. But, only for that image. In other words, only toggle the one clicked. If clicked again then change back. How can I do this with jQuery or JavaScript. The code can be seen here: 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>

Here is my 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");
  }
}

Thank you.

Possible duplicate of [Programmatically change the src of an img tag](https://stackoverflow.com/questions/11722400/programmatically-change-the-src-of-an-img-tag) — Dez, Jun 04 '17 at 09:00
Your codepen makes $('.chrome').attr('src', ...), changing all $('.chrome'). Change to $('this).attr('src', ...) — Félix, Jun 04 '17 at 09:36

LiorP · Answer 1 · 2017-06-04T08:59:15.017

0

add an ID to your image and then try this:

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

Alternatively, you can change the image depending on the source like this:

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

edited Jun 04 '17 at 08:59

answered Jun 04 '17 at 08:49

LiorP

94
4

This is not really a good solution since you would need to add an `id` to every single image and have a dedicated click handler for each. Instead, I would suggest to use a selector that will match *any* `` tag and then extract the clicked element from the click event. – Lix Jun 04 '17 at 08:52

score 0 · Accepted Answer · answered Jun 04 '17 at 08:49

You can add click event on img that exist in ul and toggle src of them by saving in data attribute. For toggling you need to save main src of image that can be saved as data-src (or anything else), And you need a flag for state of image like data-clicked (or anything else).

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

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

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

Thank you Mohammad! This works exactly how I was thinking it should work.I will practice applying this method. — martinbshp, Jun 04 '17 at 10:19

score 0 · Answer 3 · answered Jun 04 '17 at 08:55

0

What you need to use is jquery's attr() function Give your image a class name then you can change the src in jQuery by:

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

And to attach it to a click event

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

answered Jun 04 '17 at 08:55

Jay

1,251
1
9
12

Thank you very much for your response Jay but how I do I prevent it from changing all of the images and toggle it back if clicked again. – martinbshp Jun 04 '17 at 09:21
Give the tag a class or an id then use that to reference it from jquery, for toggling it back I found the answer here to be very useful https://stackoverflow.com/questions/19057513/toggling-an-image-src-with-jquery – Jay Jun 04 '17 at 10:09

Change image of specific clicked element

3 Answers3