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

你想做的是

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