Attempting to alter an image with a click and then revert it back to its original state

Question

Attempting to alter an image with a click and then revert it back to its original state

I'm currently working on a feature that toggles an image when a specific class is clicked. The code I have so far successfully switches from 'plus.png' to 'minus.png' upon clicking, but I need it to switch back to 'plus.png' if the same class is clicked again.

Here's the jQuery snippet I'm using:

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

</script>

And here's the corresponding HTML:

<li><label class="tree-toggler nav-header">Safety 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>

If anyone could provide additional help or suggestions to enhance what I've already implemented, I would truly appreciate it!

javascript jquery html toggle

Answer 1

Answer №1

To keep track of the image src you are using, you can add or remove a class. Here is an example:

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

Alternatively, you could utilize a data attribute and achieve a similar result:

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

If you opt for the data attribute method, make sure to set data-current_src='minus' initially on the element.

Answer 2

To keep track of the image src you are using, you can add or remove a class. Here is an example:

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

Alternatively, you could utilize a data attribute and achieve a similar result:

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

If you opt for the data attribute method, make sure to set data-current_src='minus' initially on the element.

Answer 3

Answer №2

My approach to solving this problem involves...

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

); } );

I have not tested it yet, but that's the concept I'm going for

Answer 4

My approach to solving this problem involves...

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

); } );

I have not tested it yet, but that's the concept I'm going for

Answer 5

Answer №3

My suggestion would be to include an additional class such as .active or .shown using JQuery when switching the image. This way, you can easily determine the current state of the item you are selecting.

The JQuery code might resemble something like this:

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

In this scenario, the active class is used to indicate the image's current state. By clicking on it, you will alter the image and set the flag.

Upon each click, the flag is evaluated and behaves accordingly. I hope this explanation proves beneficial! I'm still relatively new to S.O. =.="

Answer 6

My suggestion would be to include an additional class such as .active or .shown using JQuery when switching the image. This way, you can easily determine the current state of the item you are selecting.

The JQuery code might resemble something like this:

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

In this scenario, the active class is used to indicate the image's current state. By clicking on it, you will alter the image and set the flag.

Upon each click, the flag is evaluated and behaves accordingly. I hope this explanation proves beneficial! I'm still relatively new to S.O. =.="

Answer 7

Answer №4

If you are looking to implement this in JavaScript, my suggestion would be to follow these steps:

Place your initial image in the src attribute
Add your alternative image in the data-alternative attribute

Here is an example of how it should look:

<li>
    <label class="tree-toggler nav-header">Safety 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 here is the JavaScript code:

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

Answer 8

If you are looking to implement this in JavaScript, my suggestion would be to follow these steps:

Place your initial image in the src attribute
Add your alternative image in the data-alternative attribute

Here is an example of how it should look:

<li>
    <label class="tree-toggler nav-header">Safety 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 here is the JavaScript code:

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

Answer 9

Answer №5

Have you had a chance to check out the Jquery toggle feature yet?

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

Answer 10

Have you had a chance to check out the Jquery toggle feature yet?

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

Attempting to alter an image with a click and then revert it back to its original state

Answer №1

Answer №2

Answer №3

Answer №4

Answer №5

Similar questions

What is the process for enabling multiple consumers to subscribe to a shared topic in RabbitMQ and receive identical messages?

Can floating elements be disregarded by block elements?

Javascript has ceased functioning on the current server, however it is operational on a different

Is it possible to combine two conditions using CSS?

What is the best way to show and hide the information in a FAQ section when each one is clicked?

What strategies can be utilized to raise the max-height from the bottom to the top?

Send information from the textbox

Ways to receive JavaScript console error messages to aid in debugging your code

Issue with Material-UI Slider not updating the color of the active range

Tips for positioning HTML elements at the exact mouse location as it moves, without any delay?

When FullCalendar eventRender is called, it can cause the browser tab to become

Ways to obtain data in JavaScript function from HTML

When performing an Angular HTTP post, additional parameters are automatically included in the request

JavaScript function to provide a range of numbers based on a specified number and step value

Changing the value of a user object's variable in Django

No matter how much I try, the text refuses to align with the top-left corner

What is the best way to update information in a mongoose document using the _id field?

Tips for converting an object into parameters for ng-include

Find your favorite artist on Spotify through the search function

hybrid application combining AngularJS with Angular 17 and above versions