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

出于某种原因，我无法理解我做错了什么。我想我可能误解了“this”的含义。我希望 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;   
    });
});

除非您想单击​​每个无效的 #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/

于 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

假设您正在尝试在“默认”类和“突出显示”类之间进行转换，这似乎就是您想要的。这是一个附加到元素的委托事件，只要单击#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 回答