Question

我有一组这样的元素：

<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只切换我点击的任何元素的类。

Answer 1

你想要的是这个

$(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;   
    });
});

除非你想点击每个无效的#selectable，因为ID需要是唯一的。您可以将其更改为类并使用

$(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/

Answer 2

如果您要选择孩子，可以使用以下任何一种方法进行操作。：）

$(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); 
    });
});

Answer 3

看起来这就是你想要的，假设你试图在'默认'类和'突出'类之间转换。这是附加到#selectable元素的委托事件，只要点击其中的li，该事件就会触发。 this会引用li点击。

$( "#selectable" ).on('click','li',function(e){
    e.preventDefault();
    $(this).switchClass("ui-state-default", "ui-state-highlight", 1000);
});

快速jQuery选择器子元素

3 个答案: