使用类而不是ID

Question

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

在WordPress中，我迭代了(未知)数量的帖子，每个帖子都有两个按钮来显示更多内容。到目前为止，我已经在每个迭代中运行了一个文档就绪函数，以解决每个按is显示的问题，但这效率很低。

因此，我正在尝试使用类来编写函数。这是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()，后者将通过遍历当前项的祖先来找到最接近的匹配元素。