Question

我正在尝试更新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元素，并将细节隐藏类添加到ul中的li元素，并将它们更改为详细信息 - 单击目标ul元素时显示。

此部分的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元素中。任何帮助或指示某人都可以指出我将非常感激。谢谢。

Answer 1

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

此代码将默认返回“UL”元素，而不是QuoteLog元素。因此，请务必排除.Children代码并首先添加课程。

尝试使用此结果代码（请注意.Children如何删除）：

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

Answer 2

jQuery支持CSS样式选择器，因此在这种情况下不需要.find()。你可以更清洁 - http://jsfiddle.net/f4njs/1/

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

Answer 3

为什么你会改变甚至li，你只能更改父级的类也是ul，这个类会像孩子们一样互动：

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


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

效率更高，因为没有迭代每个li，让css做这个工作

Answer 4

我会将事件与单个LI元素相关联，而不是与UL ...

相关联

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

Answer 5

也许你需要用另一种方式来做：

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

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

更新<ul>元素中的<li>类</ul> </li>

5 个答案: