CODEWITHSUNDEEP
c#jqueryhtml
Sribin
Sribin

Reputation: 317

Jquery click function with image src

I have an image which is as below

 <img alt="" style="cursor: pointer" src="images/plus.png" width="20" height="20" />

And I'm changing this img src alternatively by using the below code

1. $("[src*=plus]").click( function () {
                    $(this).attr("src", "images/minus.png");
                });
2.  $("[src*=minus]").click(function () {
                $(this).attr("src", "images/plus.png");
            });

The first function is working as expected- when I click on the button for the first time the image is changing to 'minus',but when I click on this changed 'minus' image the function call is going again to the same first function. What am I doing wrong here. Please help.

Referred following link Changing the image source using jQuery

Upvotes: 1

Views: 2124

Answers (3)

Arun Lodhi
Arun Lodhi

Reputation: 71

You need to use

$(document).on('click', '[src*=plus]', function(event) {
    $(event.target).attr("src", "https://png.icons8.com/color/100/minus");
});
$(document).on('click', '[src*=minus]', function() {
    $(event.target).attr("src", "https://png.icons8.com/color/100/plus");
});

The img with src*=minus doesn't exist initially when the event handlers are attached, hence we need to use $(document).on('click', 'selector', handler) thereby attaching handlers on the document.

Working Fiddle: https://jsfiddle.net/wrfscfw1/1/

Upvotes: 0

Pedram
Pedram

Reputation: 16595

You didn't wrong, just need to use on function, because you changing src after DOM in result it can't find new src, so you need to use live click function:

$(document).on('click','[src*=plus]',function(){
  $(this).attr("src", "images/minus.png");
});
$(document).on('click','[src*=minus]',function(){
  $(this).attr("src", "images/plus.png");
});


$(document).on('click','[src*=plus]',function(){
  $(this).prop("src","images/minus.png");
  console.log('changed to minus');
});

$(document).on('click','[src*=minus]',function(){
  $(this).prop("src","images/plus.png");
  console.log('changed to plus');
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<img alt="some text" style="cursor: pointer" src="images/plus.png" width="20" height="20" />

Upvotes: 2

A.D.
A.D.

Reputation: 2372

you can try to use on() instead of click() or use another attribute like class for check the current status of the image which is much lighter and easy to execute with a single click event. 

$("[src*=plus]").on("click",function () {
                    $(this).attr("src", "images/minus.png");
                });
$("[src*=minus]").on("click",function () {
                    $(this).attr("src", "images/plus.png");
                });

or you can use the following as HTML:

<img alt="" style="cursor: pointer" src="images/plus.png" width="20" height="20" onclick="javascript:return img_click(this);"/>

JavaScript :

function img_click(el)
{
 if($(el).attr("src").toLowerCase().indexOf('plus') != -1)
 {
   $(el).attr("src", "images/plus.png");
 }
 else
 {
   $(el).attr("src", "images/minus.png");
 }

}

Upvotes: 2

Related Questions