函数使用 jquery 还原

Function revert with jquery

本文关键字：还原 jquery 函数      更新时间：2023-09-26

我有一个小问题。有没有可能用jquery恢复功能？我有一些点击功能，中间有操作。我可以将此元素恢复为点击前的状态吗？谢谢 4 帮助。

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

不，没有内置的方法可以使用jQuery恢复DOM操作/动画。您必须编写 2 个相互镜像的函数并编写关联的代码：

function action(){
    $('#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 revert(){
    $('#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);    
}
$('.bottom_panel_button_02').click(action);
$('.someOtherButton').click(revert);

您可以使用自定义属性执行以下操作：

$(document).ready(function() {
    $('.bottom_panel_button_02').attr("clicked", "false");
    $('.bottom_panel_button_02').click(function() {
        var clicked = $(this).attr("clicked");
        if (clicked == "false") {
            // do your click function
            $(this).attr("clicked", "true");
        } else {
            // do your revert function
            $(this).attr("clicked", "false");
        }
    });
});

或者，您可以设置全局变量/隐藏输入元素，而不是使用属性。 您还可以根据元素的单击状态进行 .addClass 和 .removeClass，并在这些 CSS 类中拥有您的状态。

相关文章：