jquery - ランタイムに css クラスを適用する方法

Question

私はjQueryが初めてです。<li>CSS クラスを要素に適用したいのですが、うまくいきません。誰でも私を助けることができますか？

私のマークアップは次のとおりです。

<ul class='change'>
    <li>companyName</li>
    <ul id='uid'>
        <li onClick='callTest()'>subcompany</li>
        <li onClick='callTest()'>subcompany</li>
        <li onClick='callTest()'>subcompany</li>
    </ul>

  <ul id='uid'>
        <li onClick='callTest()'>subcompany2</li>
        <li onClick='callTest()'>subcompany2</li>
        <li onClick='callTest()'>subcompany2</li>
    </ul>
    </li>
</ul>

私の問題は、callTest()メソッドを呼び出すときです。背景色を変更したいのですが、<li>この方法では機能しません:

$('#uid li').click(function () {
    console.log("call lil...'");
    $(this).addClass('selected').siblings().removeClass('selected');
})

それは正常に機能していますが、最初にサブカンパニーを選択したときにそのクラスが適用さselectedれ、今はサブカンパニー2を選択してクラスを適用しましたが、今回はサブカンパニークラスを削除selectedしたいと思います。これどうやってするの？

Answer 1

問題はli、下にある要素だけをターゲットにするのではなく、親を含むすべての要素をターゲットにしているようですuid

$('#uid li').click(function () {
    console.log("call lil...'");
    $(this).addClass('selected').siblings().removeClass('selected');
})

デモ:フィドル

Answer 2

HTML を次のように変更します。

<ul class='change'>
    <li>companyName</li>
    <ul id='uid'>
        <li>subcompany</li>
        <li>subcompany</li>
        <li>subcompany</li>
    </ul>
</ul>

この JS を次のように追加します。

$('#uid > li').each(function () {
    $(this).on("click", function() {
        console.log("call lil...'");
        $(this).addClass('selected').siblings().removeClass('selected');
    });
});

Answer 3

それは実際にうまく機能しています

$('ul li').click(function(){
    console.log("call lil...'");
    $(this).addClass('selected').siblings().removeClass('selected');
});

デモは次のとおりです。

html ファイルを確認してください。スクリプトまたは jquery に問題があるはずです。

Answer 4

あなたのコードは正しいです。このスクリプトを head/body に追加したため、動作しない理由です。

だからただ包むだけ$(document).ready(function()..

$(document).ready(function(){
$('ul li').click(function(){
    console.log("call lil...'");
      $(this).addClass('selected').siblings().removeClass('selected');
    })
});

また.on()、このようなイベントハンドラーを使用してみてください

$(document).ready(function(){
$('ul li').on('click', function(){
    console.log("call lil...'");
      $(this).addClass('selected').siblings().removeClass('selected');
    })
});

Answer 5

li 要素では onclick 属性は必要ありません。それらを削除します

Answer 6

onclickat を削除し、liドキュメントの準備ができたらハンドラーを追加します。

$(document).ready(function(){
  $('ul li').click(function () {
    console.log("call lil...'");
    $(this).addClass('selected').siblings().removeClass('selected');
    callTest();
  })
});

Answer 7

デモ

$('li').click(function (e) {
    $('li').removeClass('selected');
    $(e.target).addClass('selected');
})

Answer 8

ここにHTMLの問題があります：

<ul class='change'>
    <li>companyName
        <ul id='uid'>
            <li onClick='callTest()'>subcompany</li>
            <li onClick='callTest()'>subcompany</li>
            <li onClick='callTest()'>subcompany</li>
        </ul>
    </li> <!-- I moved this one -->
</ul>

あなたのjQueryに関しては、代わりに次のようにすることができます：

$('ul.change > li').click(function(){ //Only applies to the direct child of ul.change
    console.log("call lil...'");
      $(this).addClass('selected');
    })

Answer 9

クリック ハンドラ内で callTest() を呼び出します。