Using JQuery to reverse a function

Question

Using JQuery to reverse a function

Seeking a solution here: is it possible to revert a function using jQuery? I have a click function with multiple actions within. Is there a way to revert these elements back to their original state before the click event? Thank you for any assistance provided.

$('.bottom_panel_button_02').click(function(){
    $('#recipe_panel').css('opacity','1');
    $('.default_clock, .info_top_panel .random_title, .bottom_panel_button_06').css('display','none');
    $('.bottom_main_panel_button').css('background','url("img/ap_bottom_panel_button_white.png") center bottom no-repeat')
    setTimeout(function(){
        $('.arrow_up, .arrow_down').fadeIn(300);
    },500);
    $('.main_content, .oven_panel').fadeOut(200);
});

javascript jquery css revert

Answer 1

Answer №1

Unfortunately, jQuery does not have a built-in feature to easily revert a series of DOM manipulations or animations. To achieve this, you will need to create two separate functions that act as mirrors of each other and manually reset the changes made in the initial action:

function applyChanges(){
    $('#recipe_panel').css('opacity','1');
    $('.default_clock, .info_top_panel .random_title, .bottom_panel_button_06').css('display','none');
    $('.bottom_main_panel_button').css('background','url("img/ap_bottom_panel_button_white.png") center bottom no-repeat')
    setTimeout(function(){
        $('.arrow_up, .arrow_down').fadeIn(300);
    },500);
    $('.main_content, .oven_panel').fadeOut(200);    
}

function revertChanges(){
    $('#recipe_panel').css('opacity','0');
    $('.default_clock, .info_top_panel .random_title, .bottom_panel_button_06').css('display','block');
    $('.bottom_main_panel_button').css('background','')
    setTimeout(function(){
        $('.arrow_up, .arrow_down').fadeOut(300);
    },500);
    $('.main_content, .oven_panel').fadeIn(200);    
}

$('.button_to_apply_changes').click(applyChanges);
$('.button_to_revert_changes').click(revertChanges);

Answer 2

Unfortunately, jQuery does not have a built-in feature to easily revert a series of DOM manipulations or animations. To achieve this, you will need to create two separate functions that act as mirrors of each other and manually reset the changes made in the initial action:

function applyChanges(){
    $('#recipe_panel').css('opacity','1');
    $('.default_clock, .info_top_panel .random_title, .bottom_panel_button_06').css('display','none');
    $('.bottom_main_panel_button').css('background','url("img/ap_bottom_panel_button_white.png") center bottom no-repeat')
    setTimeout(function(){
        $('.arrow_up, .arrow_down').fadeIn(300);
    },500);
    $('.main_content, .oven_panel').fadeOut(200);    
}

function revertChanges(){
    $('#recipe_panel').css('opacity','0');
    $('.default_clock, .info_top_panel .random_title, .bottom_panel_button_06').css('display','block');
    $('.bottom_main_panel_button').css('background','')
    setTimeout(function(){
        $('.arrow_up, .arrow_down').fadeOut(300);
    },500);
    $('.main_content, .oven_panel').fadeIn(200);    
}

$('.button_to_apply_changes').click(applyChanges);
$('.button_to_revert_changes').click(revertChanges);

Answer 3

Answer №2

One way to achieve this is by utilizing custom attributes:

$(document).ready(function() {
    $('.bottom_panel_button_02').attr("clicked", "false");

    $('.bottom_panel_button_02').click(function() {
        var clicked = $(this).attr("clicked");

        if (clicked == "false") {
            // implement the click functionality

            $(this).attr("clicked", "true");
        } else {
            // implement the revert functionality

            $(this).attr("clicked", "false");
        }
    });
});

Alternatively, you could maintain a global variable or utilize a hidden input element to keep track of the state instead of using attributes. Another approach would be to use .addClass and .removeClass based on the clicked state of the element and define your states within these CSS classes.

Answer 4

One way to achieve this is by utilizing custom attributes:

$(document).ready(function() {
    $('.bottom_panel_button_02').attr("clicked", "false");

    $('.bottom_panel_button_02').click(function() {
        var clicked = $(this).attr("clicked");

        if (clicked == "false") {
            // implement the click functionality

            $(this).attr("clicked", "true");
        } else {
            // implement the revert functionality

            $(this).attr("clicked", "false");
        }
    });
});

Alternatively, you could maintain a global variable or utilize a hidden input element to keep track of the state instead of using attributes. Another approach would be to use .addClass and .removeClass based on the clicked state of the element and define your states within these CSS classes.

Using JQuery to reverse a function

Answer №1

Answer №2

Similar questions

The retrieved information remains unchanged even after modifications are made on the subsequent Next.js server-side rendered page

Is it possible to download multiple files using a single ajax call upon success of a click function?

Using AjaxView in Django to retrieve choices dynamically

"Building a dynamic form with ReactJS, Redux Form, and Material UI - Implementing an

How to make text in HTML and CSS stay at the bottom of a div?

What is the best method for transferring array values from an input field to a function when the input

How to hide an item in Ionic 2 using navparams

Saving user-generated inputs within a React.js component's state, focusing on securely handling passwords

The tooltip for the svg icon is not appearing

What is the method for including an input field beside the y-axis label in Chart.js?

Sending the parameter with the URL and receiving the response in return

Positioning nested DIVs using HTML5 and CSS3

Testing for undefined using the 'should' syntax in Chai

What is the process of connecting data to a list in Angular JS?

Using CSS to crop an image with a combination of relative and absolute positioning

Is there a way to delete cookies upon browser closure, but retain them while moving between pages?

jQuery is an excellent tool for implementing drag and drop folder upload functionality, all without

Prevent handling errors in Vue when Axios receives a response for every request

How can I verify the presence of links in an input field and determine its character count?

The click event in AngularJS is functioning properly, while the load event is not functioning correctly