Question

我按以下方式设置了我的HTML：

<section class="comment-block">
    <div class="comment-title">
        ...
        <button class="reply_btn">Reply</button>
        ...                                                                             
    </div>

    <p class="comment">Test comment</p>

    <form method="POST" action="/org/post/{comment_id}" class="reply-form">
        <input name="_method" type="hidden" value="PUT">
        <textarea name="body" cols="50" rows="10"></textarea>
        <div class="button-group">
            <input type="submit" value="Post comment">
            <button type="button">Cancel</button>
        </div>
    </form>                                 
</section>

使用jQuery，我希望“回复”按钮（reply_btn）将表单（reply-form）的CSS从display: none更改为display: block。

有多条评论，因此reply_btn附带的jQuery点击功能必须选择与其自身最接近的reply-form。

我尝试了这个（以及其他一些变体），但它不起作用：

$('.comment-block').on('click', '.reply_btn', function () {
    $(this).children('.reply-form').css('display', 'block');
});

然后我需要取消按钮将显示更改为无。

表单的CSS：

.comment-block .reply-form
{
   ...
   display: none;
}

Answer 1

改为：

$(this).parent().siblings('.reply-form').css('display', 'block');

或

$(this).parent().siblings('.reply-form').show();

在您的代码中，您尝试将.reply-form作为按钮的子项进行搜索，但事实并非如此。

Infact .reply-form是按钮父母的兄弟。

我认为最好将.closest()与.find()：

一起使用

$(this).closest('.comment-block').find('.reply-form').show();

Answer 2

您正在寻找班级按钮的兄弟姐妹。那不是你想要的。

您的代码是：

$(this).children('.reply-form').css('display', 'block');

它说：

$(this) <-- the button that was clicked
       .children('.reply-form')  <-- you are looking at children of the button

现在要解决问题，您需要查看点击的内容，遍历容器并查找表单。如果将类添加到重置按钮，则可以在一个块中执行这两项操作。

$('.comment-block').on('click', '.reply_btn, .reset', function () {
    var show = $(this).is(".reply_btn");
    $(this).closest(".comment-block").find("form").toggle(show);
});

JSFiddle

Answer 3

如果隐藏form元素，可以使用以下代码通过单击按钮来显示：

$(function() {
    $('.comment-block').on('click', '.reply_btn', function () {
        $(this).closest( '.comment-block' ).find('.reply-form').show();
    });
});

Answer 4

您可以类似地使用.parent()两次以获得相同的结果：

$(".reply_btn").click(function () {
  $(this).parent().parent().children('.reply-form').show();
});

我更改了部分HTML并添加了关闭按钮功能：

<section class="comment-block">
    <div class="comment-title">
        ...
        <button class="reply_btn">Reply</button>
        ...                                                                             
    </div>

    <p class="comment">Test comment</p>

    <form method="POST" action="/org/post/{comment_id}" class="reply-form">
        <input name="_method" type="hidden" value="PUT"></input>
        <textarea name="body" cols="50" rows="10"></textarea>
        <div class="button-group">
            <input type="submit" value="Post Comment">Post comment</input>
            <input type="button" class="cancel_btn" value="Cancel"></input>
        </div>
    </form>                          
</section>

而且：

$(".cancel_btn").click(function(){
  $(this).parent().parent().hide();
});

使用jsFiddle示例here。

jQuery如何显示隐藏的回复表单？

4 个答案: