0

ul 要素のすべての子要素のクラスを更新しようとしています。これが私のコードです：

 $('#quoteLog').find('ul').click( function(event){
            if (this == event.target) {
                $(this).children().toggleClass('details-shown');
            }
            return false;
        })
                .children().addClass('details-hidden');

私はあまり運がなくても、値の検索をいじっています。これにより、id=quotelog を持つ dev 要素内のすべての ul 要素が検出され、details-hidden クラスが ul の li 要素に追加され、対象の ul 要素がクリックされたときに details-shown に変更されます。

このセクションの html は次のようになります。

<div id="quoteLog">
    <ul class="quote"> Some name
        <li>detail about quote</li>
        <li>some other detail</li>
    </ul>
    <ul class="quote"> Some other name...</ul>
    ...

JQuery にはかなり新しく、クリック イベントがトリガーされたり、li 要素にクラスが追加されたりするという問題が発生しています。誰かが私を指し示すことができる助けや方向性は非常に高く評価されます. ありがとうございました。

4

5 に答える 5

1

なぜあなたはliでも変更するのでしょうか。親のクラスだけを変更することもでき、ulも変更できます。このクラスは、次のように子のliと対話します。

$('#quoteLog ul').click( function(event){
  $(this).toggleClass('details-shown');
});


ul.details-shown li {
     /* do */
}

各liを反復処理しないため、CSSにこの仕事をさせて、より効率的

于 2012-06-18T12:08:19.017 に答える
1 
$('#quoteLog').find('ul').click( function(event){
        if (this == event.target) {
            $(this).children().toggleClass('details-shown');
        }
        return false;
    })

このコードは、QuoteLog 要素ではなく、デフォルトで「UL」要素を返します。したがって、最初にコードを除外.Childrenしてクラスを追加することが重要です。

.Childrenこの結果のコードを試してください (削除方法に注意してください):

$('#quoteLog').addClass('details-hidden').find('ul').click( function(event){
        if (this == event.target) {
            $(this).children().toggleClass('details-shown');
        }
        return false;
    })
于 2012-06-18T10:11:09.417 に答える
1

jQuery は CSS スタイル セレクターをサポートしているため.find()、この場合は必要ありません。あなたはそれをもっときれいにすることができます - http://jsfiddle.net/f4njs/1/

$('#quoteLog ul li').click(function() {
    $(this).toggleClass('details-shown');
});
​
于 2012-06-18T10:13:16.653 に答える
0

イベントをULではなく単一のLI要素に関連付けます...

$('#quoteLog').find('ul li').click(function(event){
                $(this).toggleClass('details-shown');
})

はるかにクリーンな私見: このコードを使用すると、リストのすべての項目をクリックして、表示されているクラスを切り替えることができます。隠しクラスで何を達成しようとしているのかはわかりませんが、とにかく追加したい場合 (クリックするかどうかに関係なく)、toggleClass() 命令の後に追加できます。

$('#quoteLog').find('ul li').click(function(event){
                $(this).toggleClass('details-shown').addClass('details-hidden');
})
于 2012-06-18T10:10:00.433 に答える
0

たぶん、次のような別の方法でそれを行う必要があります:

$('#quoteLog ul').each(function(){

$(this).click(function({
$(this).children().each(function(){
$(this).toggleClass('details-shown');
});
}));
});

于 2012-06-18T10:13:16.280 に答える