Trying to change an image on click and back again

问题

I am trying to toggle an image when a class is clicked. So far I have this (below) and it works to change my 'plus.png' to my 'minus.png' but I need it to change back to my 'plus.png' if the class is clicked again.

I have the following jQuery:

<script type="text/javascript">
$(document).ready(function () {
$('label.tree-toggler, .yellow').click(function () {
    $(this).parent().children('.yellow').attr('src', 'img/minus.png');
});
});

</script>

HTML

<li><label class="tree-toggler nav-header">Saftey and Emissions</label><img class="yellow" src="img/plus.png"><hr></hr>
   <ul class="nav nav-list tree">
      <li><a href="#" id="secLink">link<img class="yellow" src="img/chevron-right.png"></a><hr></hr></li>
      <li><a href="#" id="secLink">link<img class="yellow" src="img/chevron-right.png"></a><hr></hr></li>
   </ul>
</li>

Is someone could help me out by adding to what I have, it would greatly be appreciated!

回答1:

You can add/remove a class to keep track of which image src you are using. Something like this:

$('label.tree-toggler, .yellow').click(function () {
    if ( $(this).parent().children('.yellow').hasClass('minus') ) {
        $(this).parent().children('.yellow').attr('src', 'img/plus.png').removeClass('minus');
    } else {
        $(this).parent().children('.yellow').attr('src', 'img/minus.png').addClass('minus');
    }     
});

You could also use a data attribute and do something similar:

$('label.tree-toggler, .yellow').click(function () {
    if ( $(this).parent().children('.yellow').data('current_src') == 'minus') {
        $(this).parent().children('.yellow').attr('src', 'img/plus.png').data('current_src', 'plus');
    } else {
        $(this).parent().children('.yellow').attr('src', 'img/minus.png').data('current_src', 'minus');
    }     
});

Using the data attribute would require initially setting data-current_src='minus' on the element.

回答2:

the way i will do it is...

$(document).ready(
    function() {
        $(".className").click(
             var imgPath = $("img").attr('src');
             if(imgPath === "+.png") {  // check against current path
                // change the path to - 
             } else {
                // change the path to +
             }

); } );

i didn't test it, but that's the idea

回答3:

I would recommend adding another class like .active or .shown through JQuery when you switch the image around. That way you could check the current state of the object you're querying.

The Jquery would probably look something like

$('label.tree-toggler, .yellow').click(function () {
   // If the active class is NOT applied
   if( !( $(this).parent().children('.yellow').hasClass('active') ) ) {
      // Apply it and change the image
      $(this).parent().children('.yellow').addClass('active').attr('src','img/minus.png');
   }
   else 
      $(this).parent().children('.yellow').removeClass('active').attr('src', 'img/plus.png');


});

What's happening here is the active class is being used to determine the state of the image displayed. When you click it, you'll change the image and apply the flag.

After every click the flag is checked and behaves accordingly. Hope that helps! I'm still new to S.O. =.="

回答4:

If you want to do it in JS, I suggest you to put :

• your initial image in src
• your alternative image in data-alternative

Like this :

<li>
    <label class="tree-toggler nav-header">Saftey and Emissions</label>
    <img class="yellow" src="img/plus.png" data-alternative="img/minus.png"><hr></hr>
    <ul class="nav nav-list tree">
        <li><a href="#" id="secLink">link<img class="yellow" src="img/chevron-right.png"></a><hr></hr></li>
        <li><a href="#" id="secLink">link<img class="yellow" src="img/chevron-right.png"></a><hr></hr></li>
    </ul>
</li>

And the JS :

<script type="text/javascript">
$(document).ready(function () {
    $('label.tree-toggler, .yellow').click(function () {
        var yellow = $(this).parent().children('.yellow').first();
        var alternative = yellow.data('alternative');
        yellow.data('alternative', yellow.attr('src'))
              .attr('src', alternative );
    });
});

</script>

回答5:

Did you see the toggle function of Jquery?

http://api.jquery.com/toggle/

来源：https://stackoverflow.com/questions/24811672/trying-to-change-an-image-on-click-and-back-again