jQuery関数の逆効果

Question

他の特定のボタンによるコンテンツの変更を復元するために、さまざまなボタンを手動で設定しています。私はそれが非常に持続可能であるとは思わないので、私の質問です：何か、この場合は他のボタンがクリックされた場合、イベントによって引き起こされた変更を元に戻す方法はありますか？例：

HTML: 
<div id="trigger"></div> 
<div id=1></div> 
<div id=2></div> 
<div id=3></div> 

CSS: 
#trigger {height:10px; width:10px; background-color:red;} 
#1 {display:none;} 
#2 {display:none;} 
#3 {display:none;} 

jQuery: 
$('#trigger').click(function() { 
    $('#1').css('display','block'); 
    $('#2').css('display','inline-block'); 
    $('#3').css('display','block'); 
}), 

Desired effect: 
$('//anything with a click function that is not #trigger').click(function() { 
    // Reverse everything caused by the #trigger, effectively setting the divs to their default states. 
}); 

Answer 1

ロールバック関数を作成して呼び出すことができます。トリガーは

$('#trigger').click(function() { 
    $('#1').css('display','block'); 
    $('#2').css('display','inline-block'); 
    $('#3').css('display','block'); 
}); 

以前の状態にロールバックすべてあなただけにすぎず、その後、削除クラスまたは他の属性を追加するスタイルの変更を適用する場合には

$("div").not("#trigger").click(function() { 
    rollBackTriggerChanges(); 
}); 

を変更

function rollBackTriggerChanges() { 
    // rollback to initial state 
} 

素早い方法はこのようなものになります

<div id="trigger">click</div> 
<div id="1">1</div> 
<div id="2">2</div> 
<div id="3">3</div> 

#trigger {height:auto; width:100%;background-color:red;} 
#1 {height:auto; width:100%; background-color:white;} 
#2 {height:auto; width:100%; background-color:white;} 
#3 {height:auto; width:100%; background-color:white;} 

$('#trigger').click(function() { 
    $('#1').css('background-color','#ff0'); 
    $('#2').css('background-color','#afd451'); 
    $('#3').css('background-color','#cd4321'); 
}); 
$("div").not("#trigger").click(function() { 
    $("div").not("#trigger").removeAttr("style"); 
}); 

Answer 2

あなたはオフ（）メソッドを使用してイベントをオフにすることができます

$('body').off('click', '#trigger'); 

http://api.jquery.com/off/

これは#trigger要素のクリックイベントをオフにします。方法を連鎖させて、クリックを解除する前にそのクリックを元に戻すこともできます。例については、上のリンクを参照してください。あなたの場合、あなたは可能性があるため

：

$('body').off('click', '#trigger') 
    // may want to replace '#trigger div' with '#1','#2', and '#3' 
    .find('#triger div').css('display','none');