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（）。通过这种方式，单击注释按钮将同时显示和隐藏下一个注释按钮。

除此之外，如果您希望隐藏所有其他评论表，那么一次只打开1个，您只需添加：

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

在执行.slideToggle().

之前

Answer 2

将id放入你的div

<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中的元素，即使它位于另一个元素内或其他元素中。

在你的例子中，你不需要它，但想到只选择没有任何类或ID的元素：）

当div的数量未知时隐藏和显示div

3 个答案: