功能恢復與jquery

Question

我有一個小問題。有沒有可能使用jQuery恢復函數？ 我有一些點擊功能與中間的行動。在點擊之前，我可以恢復這些元素嗎？ Thx 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); 
}); 

Answer 1

不，沒有內置的方法來恢復使用jQuery的DOM操作/動畫bucnch。你必須寫出兩個鏡像對方，寫出相關的代碼：

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

Answer 2

你可以使用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類中擁有你的狀態。