有多个按钮，每个按钮一个 div 当按下一个按钮时，将显示相应的 div

Question

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

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

".comment-reply-button" 是 "Raspunde" 个按钮中的 class 个 ".add-reply-container" 是 class 对应 "Raspunde" buttons

右边的文本框和按钮

问题是评论部分会扩展，我会有很多评论，我知道如何处理 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>

有多个按钮，每个按钮一个 div 当按下一个按钮时，将显示相应的 div

Having many buttons and one div for each one when pressing one button the correspondent div will be shown

html

css

jquery

hide