Question

我的父类中有两个div，其中一个由$(this).parent('div').next('.deal-rolldown').show();找到另一个，$(this).parent('div').next('.client-rolldown').show();找不到语法上相等的内容。

在WordPress中，我迭代一个（未知）数量的帖子，每个帖子都有2个按钮来显示更多内容。到目前为止，我已经在每次迭代中运行了一个文档就绪函数，以通过ID来解决每个显示，但这是低效的。

所以我试图用类编写一个函数。这是JavaScript

$('.deal-link').click(function() {
    $('.deal-rolldown').hide(); // hide all 
    $('.client-rolldown').hide(); // hide all 
    if ($(this).hasClass('active')) {
        $(this).removeClass('active');
    } else {
        $(this).addClass('active');
        $(this).next('.deal-rolldown').show();
    }
});

$('.client-link').click(function() {
    $('.client-rolldown').hide(); // hide all 
    $('.deal-rolldown').hide(); // hide all 
    if ($(this).hasClass('active')) {
        $(this).removeClass('active');
    } else {
        $(this).addClass('active');
        $(this).next('.client-rolldown').show();
    }
});

哪个操作此HTML

<div class="company">
    <div class="company-inner">
        <h2>Company 1 </h2> Company 1 Summary
    </div>
    <a href="javascript:void(0);" class="deal-link">Deal summary</a>
    <a href="javascript:void(0)" class="client-link">Client review</a>
</div>
<div style="display: none;" class="deal-rolldown">
    Company 1 reveal 1 content
</div>
<div style="display: none;" class="client-rolldown">
    Company 1 reveal 2 content
</div>

<div class="company">
    <div class="company-inner">
        <h2>Company 2 </h2> Company 2 Summary
    </div>
    <a href="javascript:void(0);" class="deal-link">Deal summary</a>
    <a href="javascript:void(0)" class="client-link">Client review</a>
</div>
<div style="display: none;" class="deal-rolldown">
    Company 2 reveal 1 content
</div>
<div style="display: none;" class="client-rolldown">
    Company 2 reveal 2 content
</div>

addClass('active')工作正常，所以我知道我得到了正确的按钮，但next()函数什么也没做。没有错误。如何从每个按钮中选择适当的显示？

编辑以下关闭：这是与标记为重复的问题不同的问题。

Answer 1

首先，而不是做

if ($(this).hasClass('active')) {
    $(this).removeClass('active');
} else {
    $(this).addClass('active');
}

您可以使用$(this).toggleClass('active');

您的问题是next()会返回紧随其后的兄弟，.deal-rolldown不是您.deal-link元素的兄弟。

你想做的是

$(this).parent('div').next('.deal-rolldown').show();

Answer 2

next()函数获得与选择器匹配的紧随其后的兄弟。类'.deal-rolldown'的div不是'.client-link'或'.deal-link'链接的兄弟。我建议使用.closest('.deal-rolldown')代替.next()，它会通过遍历当前项目的祖先来找到最接近的匹配元素。

使用类而不是ID

2 个答案: