Show/hide 附近的元素 class 使用 jquery

Question

我正在尝试切换附近元素中的两个 div 的显示（显示一个并隐藏另一个）。页面上有多个相似的元素，所以我不能使用ID。

这就是我正在尝试的，这显然是不正确的：

JQUERY

$(".buttonClass").click(function() {
    $(this).next(".innerContainer").next(".summary").toggle();
    $(this).next(".innerContainer").next(".details").toggle();
});

CSS

.buttonClass {
    cursor: pointer; 
}
.summary {
    display: none;
}

HTML

<div class="outerContainer">
    <div class="buttonClass"><img src="images/buttons/expandButton.png" /></div>
    <div class="innerContainer">
        <div class="summary">Summary here.</div>
        <div class="details">Details here.</div>
    </div>
</div>

<div class="outerContainer">
    <div class="buttonClass"><img src="images/buttons/expandButton.png" /></div>
    <div class="innerContainer">
        <div class="summary">Summary here.</div>
        <div class="details">Details here.</div>
    </div>
</div>

... more of the same

谢谢！

Answer 1

使用find()

$(".buttonClass").click(function() {
    $(this).next(".innerContainer").find(".summary").toggle();
    $(this).next(".innerContainer").find(".details").toggle();
});

或者，因为按钮和目标有一个共享父级，您可以在 .outerContainer

上使用 closest()

$(".buttonClass").click(function() {
    $(this).closest(".outerContainer").find(".summary").toggle();
    $(this).closest(".outerContainer").find(".details").toggle();
});

Show/hide 附近的元素 class 使用 jquery

Show/hide nearby elements by class using jquery

jquery

toggle

next