javascript - 使用类而不是 ID

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()返回紧随其后的 sibling ，并且 .deal-rolldown不是您的.deal-link 的 sibling 元素。

你想做的是

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