Reverse-Effekte von jQuery-Funktionen

Question

Ich habe verschiedene Schaltflächen manuell festgelegt, um Inhaltsänderungen wiederherzustellen, die durch eine andere bestimmte Schaltfläche verursacht werden. Ich finde es nicht sehr nachhaltig, und deshalb ist meine Frage: Gibt es eine Möglichkeit, Änderungen, die durch ein Ereignis verursacht wurden, rückgängig zu machen, wenn irgendetwas, in diesem Fall irgendein anderer Knopf, angeklickt wird? Um ein Beispiel zu machen:

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

Sie können eine Rollback-Funktion erstellen und es nennen.

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

Auslöser ändert

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

Transfer abbrechen alles zur vorherigen Zustand

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

Falls Sie gerade nur Stil Änderungen zu übernehmen und nicht das Hinzufügen Entfernen Klasse oder ein anderes Attribut dann ein schneller Weg wäre so etwas wie

<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

Sie können ein Ereignis deaktivieren, indem Sie die off() Methode verwendet:

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

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

Dies schaltet die Click-Ereignisse auf dem #trigger Element. Sie können Methoden auch verketten, um alles, was auf einem Klick passiert ist, rückgängig zu machen, bevor Sie es deaktivieren. Siehe den obigen Link für Beispiele.

Für Ihren Fall könnten Sie:

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