当我只想改变一个元素时，如何阻止 jQuery 影响所有元素答案

【问题标题】：How to stop jQuery affecting all elements, when I only want one element to change当我只想改变一个元素时，如何阻止 jQuery 影响所有元素
【发布时间】：2009-11-23 14:31:51
【问题描述】：

好的，我有一个<li>s 列表，其中包含一些内容：

<div>
    <ul>
        <li><h4>...</h4><div>...</div></li>
        <li><h4>...</h4><div>...</div></li>
        <li><h4>...</h4><div>...</div></li>
        <li><h4>...</h4><div>...</div></li>
        <li><h4>...</h4><div>...</div></li>
        <li><h4>...</h4><div>...</div></li>
        <li><h4>...</h4><div>...</div></li>
    </ul>
</div>

使用 jQuery，<div> 被隐藏。当<h4>s 之一被“点击”时，<div> 变为可见，再次点击时变为不可见。

这一切都很好，除了单击任何<li> 中的<h4> 时，所有<div>s 都可见。

如何阻止这种情况发生？我只希望<div> 在同一个<li> 中，与单击的<h4> 可见。

这是我的 jQuery：

$(document).ready(function() {
    $('div div').hide();
    $('div h4').click(function(){
        if($('div div').is(':hidden')) {
            $('div div').show();
            $('div li').addClass('open');
            }
        else {
                $('div div').hide();
                $('div li').removeClass('open');
            }
        });
    });

【问题讨论】：

'dive div' 看起来不对。 dive?
这是重新输入代码时的拼写错误......现在已更正

标签： javascript jquery html css

【解决方案1】：

您也可以使用“兄弟姐妹”选择器

$(document).ready(function() {
    $('div div').hide();
    $('div h4').click(function(){
        $(this.parentNode).toggleClass('open');
        $(this).siblings('div').toggle();
    });
});

【讨论】：

但是这样你就可以将类添加到 h4 元素中，除非是 li
:edited: 你是对的，在这种情况下你使用 this.parentNode 而不是 this.

【解决方案2】：

$(document).ready(function() {
        $('div div').hide();
        $('div h4').click(function(){

                if($(this).parents('div').is(':hidden')) {
                        $(this).find('div').show();
                        $(this).addClass('open');
                        }
                else {
                                $(this).parents('div').hide();
                                $(this).removeClass('open');
                        }
                });
        });

【讨论】：

【解决方案3】：

试试这个：

$(document).ready(function() {
            $('div div').hide();
            $('div h4').click(function(){ 
                    var $li=$(this).closest('li');
                    var $innerDiv=$li.find('div')

                    if($innerDiv.is(':hidden')) {
                            $innerDiv.show();
                            $li.addClass('open');
                            }
                    else {
                                    $innerDiv.hide();
                                    $li.removeClass('open');
                            }
                    });
            });

【讨论】：

【解决方案4】：

点击处理函数正在使用普通的$('foo')，它正在查看全局文档。我敢打赌，该解决方案涉及到this 的一些使用，指的是已点击的实际特定h4 元素，而不是“文档中的所有内容”。

【讨论】：

【解决方案5】：

通过选择$('div div')，您将选择所有属于其他 div 子级的 div。这适用于您的初始隐藏，因为您隐藏了所有 div，但在 if 语句中您可能想要更像$(this).next()

【讨论】：

【解决方案6】：

以下内容应作为 $("div h4").click(...) 的点击事件。

$(this.parentNode).toggleClass("open").children("div").toggle();

【讨论】：

【解决方案7】：

我建议 .siblings().first() 只影响 jQuery 找到的第一个兄弟姐妹。

【讨论】：