1

私はこのような要素のセットを持っています：

<ol id="selectable">
    <li class="ui-state-default">A</li>
    <li class="ui-state-default">B</li>
    <li class="ui-state-default">C</li>
    <li class="ui-state-default">D</li>
    <li class="ui-state-default">E</li>
    <li class="ui-state-default">F</li>
    <li class="ui-state-default">G</li>
    <li class="ui-state-default">H</li>
    <li class="ui-state-default">I</li>
    <li class="ui-state-default">J</li>
    <li class="ui-state-default">K</li>
    <li class="ui-state-default">L</li>
</ol>

これは私のjqueryコードです：

$(function() {
        $( "#selectable" ).click(function(){
            $(this).switchClass( "ui-state-highlight", 1000 );
            return false;   
        });
    });

どういうわけか、私は自分が間違っていることを理解するのに苦労しています。「これ」の意味を誤解しているのではないかと思います。switchClassで、クリックした要素のクラスのみを切り替えたい。

4

3 に答える 3

4

あなたが欲しいのはこれです

$(function() {
    // Use $( "#selectable > li" ) if you want to limit to direct children
    $( "#selectable li" ).click(function(){  //  binds the click event all li descendants of selectable
        $(this).switchClass("ui-state-default", "ui-state-highlight", 1000);  // this is now the li that was clicked
        return false;   
    });
});

liより良い方法は、イベントハンドラーをそれぞれにバインドせずに、親要素にイベントが発生したときにイベントをリッスンさせることで効率が上がるため、委任することです。

$(function() {
    $( "#selectable" ).on('click','li'(function(){  
        $(this).switchClass("ui-state-default", "ui-state-highlight", 1000);  // this is now the li that was clicked
        return false;   
    });
});

IDは一意である必要があるため、有効ではない各#selectableをクリックする場合を除きます。クラスに変更して使用できます

$(function() {
    $( ".selectable" ).click(function(){  
        $(this).switchClass("ui-state-default", "ui-state-highlight", 1000);  
        return false;   
    });
});

次のようにtoggleClassを使用できます

$(function() {
    $("#selectable").on('click', 'li', function() {
        $(this).toggleClass("ui-state-default ui-state-highlight"); // this is now the li that was clicked
        return false;
    });
});​

http://jsfiddle.net/G33Mc/

于 2012-08-07T19:42:04.343 に答える
0

子を選択する場合は、次のいずれかの方法を使用して選択できます。:)

$(function() {
    // this will find all immediate children inside #selectable
    $('#selectable').children().click(function() {
        $(this).switchClass('ui-state-highlight', 1000); 
    });

    // this will find all immediate children that, are an li, inside #selectable
    $('#selectable > li').click(function() {
        $(this).switchClass('ui-state-highlight', 1000); 
    });

    // alternatively, we could look for all anchors inside the li items
    $('#selectable li a').click(function() {
        $(this).switchClass('ui-state-highlight', 1000); 
    });
});
于 2012-08-07T19:45:29.143 に答える
0

'default'クラスと'highlight'クラスの間で移行しようとしていると仮定すると、これはあなたが望むもののようです。これは要素に添付された委任されたイベントであり、要素内がクリックさ#selectableれるたびに発生します。クリックされたものを参照します。lithisli

$( "#selectable" ).on('click','li',function(e){
    e.preventDefault();
    $(this).switchClass("ui-state-default", "ui-state-highlight", 1000);
});
于 2012-08-07T19:45:41.750 に答える