jQuery removeClassがクリック機能で動作しないのはなぜですか？

Question

別のliをクリックしたときに、removeClassがアクティブなクラスを削除しない理由を理解できないようです。それが同じ李だったら私はクラスを削除するために兄弟を使用することができますが、悲しいことに、ここでもうまくいきません。

私が持っているこの単純な問題を理解したいと思います。

$('.r-picker li').click(function(){ 
 
    $('.r-picker li .data.active').removeClass('active'); 
 
    $('.r-picker li .data').addClass('active'); 
 
});

.active{ 
 
    color:red; 
 
    font-size:25px; 
 
    font-weight:bold; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div class="r-picker"> 
 
    <ul> 
 
    <li> 
 
     <div class="data">me1</div> 
 
    </li> 
 
    <li> 
 
     <div class="data">me1</div> 
 
    </li> 
 
    </ul> 
 
</div>

http://jsfiddle.net/Lb65e/125/

Answer 1

Updated fiddle。

あなたは、クリックされたliを参照する代わりに$(this)を使用する必要があります。

エルス

$('.data', this).addClass('active'); 

あなたのコード内の.dataセレクタは、このクラスを持つすべての要素にクラスを追加します：

$('.r-picker li .data').addClass('active'); 

NOTE ：また、クリックすると、dataクラスのすべてのelmentsからクラスactiveを削除する必要があります。

$('.r-picker li .data').removeClass('active'); 

希望します。

$('.r-picker li').click(function() { 
 
    $('.r-picker li .data').removeClass('active'); 
 
    $('.data', this).addClass('active'); 
 
});

.active{ 
 
    color:red; 
 
    font-size:25px; 
 
    font-weight:bold; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div class="r-picker"> 
 
    <ul> 
 
    <li> 
 
     <div class="data">me1</div> 
 
    </li> 
 
    <li> 
 
     <div class="data">me1</div> 
 
    </li> 
 
    </ul> 
 
</div>

Answer 2

あなたのコード作業です。ここではそれが何をするかです：クラスdataとactiveを持つすべての要素を検索し、それらのすべてからactiveを削除

$('.r-picker li .data.active').removeClass('active'); 

を。クラスdataを持つすべての要素を検索し、それらのすべてにクラスactiveを追加

$('.r-picker li .data').addClass('active'); 

。

これが実行されると、削除されたすべての要素にクラスactiveが追加されます。あなたのイベントハンドラで

、はクラスを追加するとき、あなただけの関与<li>に追加する必要があります。

$(this).find(".data").addClass("active"); 

jQueryのイベントメカニズムがthisがに関与DOM要素にバインドされていることを確認しますそのため、$(this)はその要素のjQueryオブジェクトを提供します。 .find()メソッドは、その要素から始まるDOMセレクタ検索を実行します。したがって、$(this).find(".data")は、クリックされた要素の下のDOMサブツリーにクラスdataの要素を検出します。

Answer 3

現在のliのdivをハイライト表示する必要があります。

最初にアクティブなクラスを削除してからdiv.dataを見つけます。 thisliと

相続人は、あなたのフィドルが更新され、作業...バッククラスを追加します：http://jsfiddle.net/Lb65e/126/