javascript - 如何使用jquery清除单击按钮的效果

Question

我正在做如下所示的事情：

$("#btn1").click(function(){
    $('<div></div>').appendTo('body');
});

当我单击它时，它会一次又一次地附加除法，但是我想要的是当我单击其他按钮时应该没有“btn1”的效果意味着我想在单击第二个按钮后清除第一个按钮的效果。

我怎么能做到这一点？

Answer 1

为什么不向 div 添加一个类btn1：

$("#btn1").click(function() {
    $("<div class='new-div'></div>").appendTo('body');
});

然后你的第二个按钮可以像这样删除它 -

$("#btn2").click(function() {
    $(".new-div").remove();
});

Answer 2

当您单击第一个按钮时，它会将 div 标签附加到正文中

$("#btn1").click(function(){
    $('div').appendTo('body');
});

然后当您单击第二个按钮时，它会从正文中删除 div 标签并清除前一个

$("#btn2").click(function(){
    $('body').children("div").remove();
});

Answer 3

http://api.jquery.com/click/ says about .click: "This method is a shortcut for .on( "click", handler )". So you'll need .off (http://api.jquery.com/off/) to clear the event handler.

Answer 4

那么最简单的事情就是一个标志：

var btn_is_active = true; // set flag's initial state

$( "#btn1" ).click( function(){
    if ( btn_is_active ){ // only perform action if boolean is true
      $( "<div></div>" ).appendTo( "body" );
    }
});


$( "#btn2" ).click( function(){
    // toggle the boolean value
    btn_is_active = !btn_is_active;
});

在上面的例子中，#btn2控制标志；每次#btn2单击时，btn_is_active布尔值都会从 true 切换为 false，因此启用/禁用#btn1.

---

为了清除#btn1已经完成的任何操作，您必须能够跟踪'<div></div>'添加的所有元素。为此，您可能希望给他们一个类属性，然后#btn2可以删除所有具有该类属性的元素。

Answer 5

我想你想禁用#btn1第一次点击事件

$('#btn1").unbind('click');

这将使用该按钮清除注册的点击事件