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 
$('#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;
    })
于 2012-06-18T10:11:09.417 回答
1

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

$('#quoteLog ul li').click(function() {
    $(this).toggleClass('details-shown');
});
​
于 2012-06-18T10:13:16.653 回答
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 回答
0

我会将事件与单个 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');
})
于 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 回答