2

所以基本上我有这个允许评论的小型社交网站。我已经建立了一个评论部分，一旦用户点击“评论”，它就会向下滑动，并在用户状态下向下滑动。

我的问题是，现在，JavaScript 只适用于一个帖子 ID，而其余的显然不能使用一个 ID，因为您只能使用一次。但是当然，如​​果我改用类，所有评论部分都会向下滑动，因为现在它们都是同一个类。有关我的 HTML 和 JavaScript，请参见下文。

所以如果有人有更好的方法，请帮助:)

$(function () {
    $(".comment-box").slideUp();

    //when "comment" is clicked, slide down the comment box. 
    if ($(".comment-box-btn").click(function () {
        $(".comment-box").slideDown();
    }));
    //when "cancel" is clicked, slide up the comment box.
    if ($(".close-comment-box").click(function () {
        $(".comment-box").slideUp()
    }));

});

这是使用的 HTML

//anchor for "Comment" 
<a class="comment-box-btn" href="#"><i class="icon-comment"></i> Comment</a>


//comment box
<div class="row comment-box" style="display:none;">
<div class="col-md-12">
<form accept-charset="UTF-8" action="" method="post"> 
<textarea class="form-control animated" cols="180" id="new-comment" name="comment" placeholder="Comment.." rows="1"></textarea>

<div class="text-right" style="margin-top:20px;">
<a class="btn btn-default close-comment-box" href="#">
<span class="glyphicon glyphicon-remove"></span> Cancel</a>
<button class="btn btn-info" type="submit">Comment</button>
</div>
</form>
</div>
</div>
4

3 回答 3

3

如果每个评论框都与他们的按钮相邻，你可以这样做

修订版：

$(function () {
    //slide up the box on page load. 
    $(".comment-box").slideUp();
    $(".comment-box-btn").each(function (i) {
        $(this).click(function () {
            $(".comment-box").eq(i).slideDown(500, function () {
                $(this).find(".close-comment-box").click(function () {
                    $(".comment-box").eq(i).slideUp()
                });
            });
        }); // click
    }); // each
});

见新的 JSFIDDLE

于 2013-11-10T03:02:55.013 回答
0

不要在处理程序上调用$(".comment-box").slideDown();和，而是$(".comment-box").slideUp();尝试使用$(this)和parent()函数。如果我没记错的话，按钮是三层的，所以它会是：

$(function(){ 

//slide up the box on page load. 
    $(".comment-box").slideUp(); 

    //when "comment" is clicked, slide down the comment box. 
    if($( ".comment-box-btn" ).click( function() {
    $(this).parent().parent().parent().slideDown();
    {
     //when "cancel" is clicked, slide up the comment box.
     if($( ".close-comment-box" ).click( function() {
         $(this).parent().parent().parent().slideUp()
     }));
     }}));
     });;
于 2013-11-10T02:50:04.130 回答
0

如果close-comment-box按钮在里面comment-box，你可以找到父级：

$('.close-comment-box').click(function(){
  $(this).parents('.comment-box:eq(0)').slideUp();
});

这样它只应用comment-box按钮所属的父级，而不是所有的评论框。

于 2013-11-10T02:55:11.643 回答