javascript - jqueryを使用してクリックボタンの効果をクリアする方法

Question

私は以下のように何かをしています:

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

クリックすると分割が何度も追加されますが、他のボタンをクリックすると、「btn1」の効果がなくなり、2番目のボタンをクリックした後に最初のボタンの効果をクリアしたいという意味になります。

どうすればこれを行うことができますか？

Answer 1

最初のボタンをクリックすると、divタグが本文に追加されます

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

次に、2番目のボタンをクリックすると、本文からdivタグが削除され、前のタグがクリアされます

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

Answer 2

追加する div にクラスを追加しない理由btn1:

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

次に、2番目のボタンで次のように削除できます-

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

Answer 3

最も単純なのはフラグです。

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 4

http://api.jquery.com/click/は次のように述べてい.clickます: 「このメソッドは " のショートカットです.on( "click", handler )。そのため、イベント ハンドラーをクリアするには.off( http://api.jquery.com/off/ )が必要です。

Answer 5

#btn1最初のクリック時のイベントを無効にしたいと思います

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

これにより、そのボタンで登録されたクリックイベントがクリアされます