スパンをクリックすると、同じ親の下にある他のスパンからすべてのクラスが削除されます

Question

類似しているが幅が広すぎたり、良いサンプルコードが表示されない質問がいくつかあります。

私がしたいのは、ユーザがスパンbButtonをクリックした後、selectedクラスが他のすべてのスパンから削除され、notSelectedクラスに置き換えられた場合です。

<div id="mainNav"> 
    <span id="aButton" class="button selected">a</span> 
    <span id="bButton" class="button notSelected">b</span> 
    <span id="cButton" class="button notSelected">c</span> 
</div> 

これに対するjQueryの解決策は何ですか？

ありがとうございます！

Answer 1

1. クリックされた要素からnotSelectedクラスを削除します。
2. クリックした要素にselectedクラスを追加します。
3. すべての兄弟からselectedクラスを削除します。
4. notSelectedクラスをすべての兄弟に追加します。

$('#mainNav > span').click(function() { 

     $(this) 
     .removeClass('notSelected') 
     .addClass('selected') 
     .siblings() 
     .removeClass('selected') 
     .addClass('notSelected'); 

}); 

jsFiddle

。

脇の下として、私はnotSelectedクラスで気にしません。

selectedの存在によってどの要素が選択されるかを決めることができます。要素にselectedクラスがない場合は選択されません。

Answer 2

はこれを試してみてください：

$('span').click(function(){ 
    $(this).parent().children('span').each(function(){ 
    $(this).removeClass('selected').addClass('notSelected'); 
    }); 
    $(this).removeClass('notSelected').addClass('selected'); 
}); 

の作業例：http://jsfiddle.net/AlienWebguy/SnnzV/

Answer 3

$('span').live('click',function(){ 

$(this).removeClass('notSelected'); 
$(this).addClass('selected'); 


    $(this).siblings().each(function(){ 

      $(this).removeClass('Selected'); 
      $(this).addClass('notSelected'); 

    }); 

});