クリックでJqueryスイッチのオン/オフを切り替える

Question

クリック機能でクラスonを削除し、新しいクラスoffを追加しようとしています。 divを再度クリックすると、クラスonを再度追加して、クラスoffが削除されています。どのような理由でこれが機能していないのか分かりません。しかし、それが働くことを警告するなら。 ここに私のコードです。そしてJsfiddle demo

$(".on").bind('click',function() { 
    $(this).removeClass('on').addClass('off'); 
    alert('Hello World'); 
}) 
$(".off").bind('click',function() { 
    $(this).removeclass('off').addClass('on'); 
    alert('Hello World'); 
}) 
​ 

Answer 1

$(".on")と$(".off")は現在、セレクタに一致するDOM内の要素を選択します。したがって、要素のクラスを.onから.offに変更すると、それは要素にバインドされているので、.onイベントハンドラを起動します。あなたは、イベントの委任を使用することができますが、私は.toggleClass()はおそらくあなたのためのより高度な実装であると思う：ここ

$(".on, .off").bind('click',function() { 
    $(this).toggleClass('on off'); 
    alert('Hello World'); 
}) 

はデモです：http://jsfiddle.net/LEvM4/1/

あなたが要素の上に現在あるクラス知る必要がある場合あなたがチェックすることができます.hasClass()：ここ

$(".on, .off").bind('click',function() { 
    $(this).toggleClass('on off'); 
    if ($(this).hasClass('on')) { 
     alert('Hello World'); 
    } else { 
     alert('Goodbye World'); 
    } 
}) 

はデモです：http://jsfiddle.net/LEvM4/2/

イベント委任に関する単語。また、あなたはにバインドする要素の祖先である要素に結合し、そして子孫要素にイベントハンドラを委任することができます。http://jsfiddle.net/LEvM4/3/

マイナス面へ：ここ

$(document).delegate(".on", 'click', function() { 
    $(this).addClass('off').removeClass('on'); 
    alert('Goodbye World'); 
}).delegate(".off", 'click', function() { 
    $(this).addClass('on').removeClass('off'); 
    alert('Hello World'); 
}) 

デモですイベントの委任とは、イベントが発生したときにオーバーヘッドが増えることです。可能であれば、要素に直接バインドするのが通常です。通常、要素が現在DOMに存在しないが、要素の将来のインスタンスにバインドする場合は、イベント委譲を使用します。

屋のためのいくつかのドキュメント：

• .on()：http://api.jquery.com/on
• .toggleClass()：http://api.jquery.com/toggleClass
• .hasClass()：http://api.jquery.com/hasClass
• .delegate()：http://api.jquery.com/delegate

Answer 2

ライブバインディングのようなものを使用すると、コード作成がずっと簡単になります。検討する

$('.on').live('click', function() { 
    $(this).removeClass('on').addClass('off'); 
}); 
$('.off').live('click', function() { 
    $(this).removeClass('off').addClass('on'); 
}); 

Answer 3

あなたはそれを確認してください。

$(".on").live('click',function() { 
    $(this).removeClass('on').addClass('off'); 
}) 
$(".off").live('click',function() { 
    $(this).removeclass('off').addClass('on'); 
})