Question

在网页上我们有个人资料列表。在个人资料的右侧是一些文字，后面是箭头img#arrow。

单击img#arrow时，我们希望运行以下jQuery：

但是，相应的.bottom-sec并未切换。

＆＃13;

jQuery('#arrow').click(function(){
    var $parent = $(this).parent();
    $($parent).addClass('active');
    jQuery($parent +' .bottom-sec').toggle();
});

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="profile-right">
    <h2>Bob Brown</h2> 
    <h3>Non-Executive Chairman</h3> 
    <p>Intially showing text.</p>
    <div class="bottom-sec" style="display: none;">
        <p>Initially hidden text.</p>
    </div>
    <img id="arrow" src="/wp-content/themes/wtc/images/icons/down-arrow-circle-hi.png"> 
</div>

＆＃13;

Answer 1

<强>问题

您的代码问题正是您的问题的评论所说的，但他没有解释任何事情：

您正在结合两种不同的方式来选择元素。一个是选择器，另一个是遍历。您以不可能的方式（$parent + ' .bottom-sec'部分）使用它们。评论链接到MySQL Site，您应该阅读！它告诉了你很多关于如何使用遍历函数的信息，你可以使用它！

<强>解决方案

这有多种解决方案，但我会写下我认为最好的那个：

首先，稍微更改一下HTML。我删除了.bottom-sec的元素样式，并将图像的ID更改为类，因为页面上有多个具有相同ID的图像，这不是建议的事情。类可以多次出现，id不能。

<div class="profile-right">
    <h2>Bob Brown</h2> 
    <h3>Non-Executive Chairman</h3> 
    <p>Intially showing text.</p>
    <div class="bottom-sec">
        <p>Initially hidden text.</p>
    </div>
    <img class="arrow" src="/wp-content/themes/wtc/images/icons/down-arrow-circle-hi.png"> 
</div>

我已将JavaScript缩减为以下内容。请注意，这只是简化为一行，点击.arrow元素会搜索最近的.profile-right父级。如果由于某种原因，您决定更改HTML并且.arrow元素不再是.profile-right的子元素，则此代码仍然有效。它唯一能做的就是在active上切换.profile-right课程。

jQuery(document).on('ready', function() {
    jQuery('.arrow').on('click', function(){
        jQuery(this).closest('.profile-right').toggleClass('active');
    });
});

由于OP的评论，添加了文档就绪监听器。

使用CSS，我们可以使用新的.active类来显示或隐藏元素。

.profile-right .bottom-sec {
    display: none
}

.profile-right.active .bottom-sec {
    display: block
}

原始代码修复

如果由于某种原因您想使用原始代码，则应该如此：

// Nothing wrong about this part. 
// Your only worry should be that there could be 
// multiple elements with the same ID, which is something really bad.
jQuery('#arrow').click(function(){
    // This part is correct, no worries
    var $parent = $(this).parent();
    // Removed the $(...), because $parent is already a jQuery object
    $parent.addClass('active');
    // Changed the selector to a find function
    $parent.find('.bottom-sec').toggle();
});

您还可以将侦听器函数中的所有代码组合到一行：

jQuery('#arrow').click(function(){
    $(this).parent().addClass('active').find('.bottom-sec').toggle();
});

Answer 2

更改您的js代码，如下所示。

jQuery('#arrow').click(function(){
    var $parent = $(this).parent();
    $($parent).addClass('active');
    jQuery($parent).find('.bottom-sec').toggle();
});

Answer 3

在您的事件监听器中，您可以捕获触发事件的元素（向下箭头）。它将被称为this。

然后，您可以使用.next()和.parent()访问DOM树，以访问<div>进行切换。

注意：您可能需要比我上面解释的功能更多的功能。

注意2：如果没有代码或更详细的信息，我们无法帮助您，如果您添加详细信息，我将编辑此答案。

jQuery.toggle（）没有在div上工作

3 个答案: