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

您可以创建rollBack函数并调用它。

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

触发更改

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

将所有内容回滚到之前的状态

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

如果您只是应用样式更改而不添加删除类或任何其他属性，那么快速方式将是这样的

<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

您可以使用off（）方法关闭事件：

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

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

这会关闭#trigger元素上的click事件。您还可以链接方法以在关闭之前撤消点击发生的任何事情。请参阅上面的链接以获取示例。

根据您的情况，您可以：

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

jQuery函数的反向效果

2 个答案: