當div的數量未知時隱藏和顯示div

Question

我有一個包含多個帖子div的頁面，並且每個帖子都有一個隱藏的評論表單。 在單擊按鈕或鏈接后，利用JQuery / JavaScript僅顯示該帖子的評論表單的最佳方法是什么。

<div class="post">

  <p>Some Content</p>

  <a href="#" class="commentButton">Comment</a>

  <div class="commentForm" style="display:none"></div>

<div>

Answer 1

$('.commentButton').on('click', function(){
    $(this).next().slideToggle();
});

將click事件委托給commentButton，該事件應切換commentForm。 在事件內部，移至下一個元素，然后執行slideToggle（）。 這樣，單擊評論按鈕將只顯示和隱藏下一個。

進一步講，如果您希望隱藏所有其他commentForms以便一次只打開1個，則可以簡單地添加：

$('.commentForm').hide();

在執行.slideToggle().

Answer 2

在您的div中輸入id

<div class="commentForm" id="myID" style="display:none"></div>

現在在腳本中

if(someCondition) {
    document.getElementById('myID').style.display = 'hidden'; 
}else {
    document.getElementById('myID').style.display = 'visible'; 
}

Answer 3

next()可能並不總是有效，因為很多時候元素並不位於按鈕（觸發動作）本身之后。

在這種情況下，您可以執行以下操作：

$('.commentButton').on('click', function(){
    $(this).parents('.post:eq(0)').find('.commentForm(0)').show();
    // or: fadeIn(500); / fadeOut(500);
    // or: slideToggle(); / slideUp(); / slideDown();
    // or: css('display, 'block'); / none
});

這將發現它是該類post的第一個父級，而不是它內部的帶有commentForm類的commentForm即使該元素位於另一個元素或另一個等中也是如此。

在您的示例中，您並不一定需要它，但可以考慮只選擇沒有任何類或ID的元素：）