jquery - 有很多按钮，每个按钮一个div，当按下一个按钮时，将显示对应的div

Question

所以我希望当我按下第一个“Raspunde”按钮时，他旁边的文本框消失，现在如果我按下第一个“Raspunde”按钮，两个文本框都会消失，而不仅仅是第一个。

$('.comment-reply-button').click(function () {
    $('.add-reply-container').toggle(500);
});

.comment-reply-button"是 "Raspunde"按钮类“.add-reply-container”是对应“Raspunde”按钮右侧的文本框和按钮的类

问题是评论部分会扩展，我会有很多评论，我知道如何处理 2、3、4 条评论，但不知道如何处理数百条或更多条评论。

HTML:

<div class="comment-container">
        <div class="comment-title">
            <span class="comment-creator-name">Apetrei Alin</span> • acum 10 minute
        </div>
        <div class="comment-text">
            This site has not worked properly in months. We can't page down, it freezes and directs us to places we didn't even click on and chat keeps messing up to.
            Repeatedly reported and it's never fixed or responded to. Months and Months of the same problems and not one fix.
        </div>
        <div class="comment-bottom">
            <button class="comment-reply-button">Raspunde</button>
        </div>
    </div>
    <div class="add-reply-container">
        <textarea class="add-reply-textbox" placeholder="Scrie o intrebare.." >
        </textarea>
        <button class="add-reply-button">Trimite</button>
    </div>

Answer 1

尝试使用下面的代码

$('.comment-reply-button').click(function() {
  $(this).closest(".comment-container").next('.add-reply-container').toggle(500);
});

$(this) // The button you clicked on
.closest(".comment-container") // The closest element of the button with the class comment-container
.next('.add-reply-container') // find the next object with the add-reply-container class

演示

$('.comment-reply-button').click(function() {
  $(this).closest(".comment-container").next('.add-reply-container').toggle(500);
});

.add-reply-container {
  display: none
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="comment-container">
  <div class="comment-title">
    <span class="comment-creator-name">Apetrei Alin</span> • acum 10 minute
  </div>
  <div class="comment-text">
    This site has not worked properly in months. We can't page down, it freezes and directs us to places we didn't even click on and chat keeps messing up to. Repeatedly reported and it's never fixed or responded to. Months and Months of the same problems
    and not one fix.
  </div>
  <div class="comment-bottom">
    <button class="comment-reply-button">Raspunde</button>
  </div>
</div>
<div class="add-reply-container">
  <textarea class="add-reply-textbox" placeholder="Scrie o intrebare..">
        </textarea>
  <button class="add-reply-button">Trimite</button>
</div>

<br>

<div class="comment-container">
  <div class="comment-title">
    <span class="comment-creator-name">Apetrei Alin</span> • acum 10 minute
  </div>
  <div class="comment-text">
    This site has not worked properly in months. We can't page down, it freezes and directs us to places we didn't even click on and chat keeps messing up to. Repeatedly reported and it's never fixed or responded to. Months and Months of the same problems
    and not one fix.
  </div>
  <div class="comment-bottom">
    <button class="comment-reply-button">Raspunde</button>
  </div>
</div>
<div class="add-reply-container">
  <textarea class="add-reply-textbox" placeholder="Scrie o intrebare..">
        </textarea>
  <button class="add-reply-button">Trimite</button>
</div>