使用 jquery 恢复函数答案

【问题标题】：Function revert with jquery使用 jquery 恢复函数
【发布时间】：2012-08-06 11:11:40
【问题描述】：

我有一个小问题。有没有可能用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);
});

【问题讨论】：

标签： javascript jquery css revert

【解决方案1】：

你可以用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") {
            // do your click function

            $(this).attr("clicked", "true");
        } else {
            // do your revert function

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

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

【讨论】：

是的，我可以这样做，但它会覆盖所有元素，我不想那样做......
@ŁukaszBorawski 在这种情况下，DOM 没有直接的“还原”功能，您必须自己执行此操作。实现此目的的另一种方法是将 DOM 中的所有“可点击”元素复制到具有某些 ID 的隐藏 div 中，并编写自己的还原，这将只从 div 中获取原始元素并用该副本替换点击的元素，这将添加不过，下载页面的开销很大。
这是一种想法，但我认为更好的方法是将这一切行动转变为自然条件——谢谢

【解决方案2】：

不，没有内置方法可以使用 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);

【讨论】：