Javascript jQuery.next（）.slideToggle（）不工作

我正在从头开始创建自己的评论系统。评论本身是根据数据库中的评论动态生成的，对于每个评论，我都会附加一个回复文本区域和按钮，供用户发布对某人评论的回复

问题是，当我点击回复链接时，它会为每条评论打开一个回复框，而不仅仅是用户希望回复的评论

HTML：

<a class="comment-reply">Reply</a>

<!--REPLY BOX -->
<div class="reply-box clearfix">
    <?php if($signed_in) { ?>
    <!-- reply input textarea -->
    <div class="container">
        <form id="reply-form">
            <textarea id="reply" rows="1" placeholder="Your reply here..."></textarea>
            <p><input id="reply-btn" type="submit" class="btn btn-primary floatL" value="Post reply" /></p>
        </form>
    </div>
    <?php } ?>
</div>

以前

别介意造型，我还在做原型

---

编辑-添加渲染页面

---

9秒前
这是一条评论

回复
删除评论

也许下面的代码会有所帮助，我正在使用当前元素的parentElement，然后获取同一组中的textarea。在附加click处理程序时，我使用一个带有类注释的div容器，并在单击时仅附加锚（函数

.on

中的第二个参数）

评论1


评论2


评论3


$（“textarea”）.hide（）；
$（“.comments container”）。在（“click”，“a”，函数（e）上{
e、 预防默认值（）；
$（“textarea”）.hide（）；
$（this.parentElement.getElementsByTagName（“textarea”）[0]）
.stop（）.slideToggle（“快速”）；
});

问题在于.reply框在DOM中与单击的.comment reply链接不在同一级别（即不是同级）。如果您看到，您将看到它只搜索兄弟姐妹

---

我想你需要

.parents（“.media”）。下一步（“.reply box”）

看不到问题。我想它起作用了。检查“它对我有效”：它对我也有效：远程猜测这部分可能是问题所在，除非您使用的是HTML5。尝试使用

。您正在哪个浏览器中测试此功能？

<script>    
$(document).ready(function(e) {

    //hide reply box on page load
    $('.reply-box').hide();

    //show each individual reply box on click
    $('.comment-reply').click(function() {
        //$('.reply-box').stop().slideToggle("fast"); /* This opens all div */
        $(this).next('.reply-box').stop().slideToggle("fast"); /* This doesn't work at all */
    });
});
</script>

 <!--POSTED COMMENT-->
                <div id="comment-<?php echo $comment_id; ?>" class="media">
                    <div class="pull-left">
                        <a href="#"><img style="height: 48px; width: 48px;" src="<?php echo $c_member_avatar; ?>" class="img-rounded" alt=""></a>
                        <div style="font-size:1.2em">
                            <a style="color: #888888;" href="#">
                                <span class="glyphicon glyphicon-thumbs-up"></span>
                            </a>
                            <a style="color: #888888;" href="#">
                                <span class="glyphicon glyphicon-thumbs-down"></span>
                            </a>
                        </div>
                    </div>
                    <div class="media-body">
                    <h5 style="margin: 0 0 5px 0;"><a href="#"><?php echo $c_member_username; ?></a><small>&nbsp;&nbsp;<?php echo $comment_timestamp; ?> ago</small><small style="margin-right: 20px;" class="floatR"><a id="comment-flagged" href="#"><span style="color: #5A5A5A" title="Flag as inappropriate" class="glyphicon glyphicon-flag"></span></a></small></h5>
                    <p class="clearfix" style="margin-bottom:0px;"><?php echo $commentPosted; ?></p>
                    <?php if($signed_in && $username == $c_member_username) { ?>
                        <small class="floatL"><a class="comment-reply" id="<?php echo $comment_id; ?>" >Reply</a></small>
                        <small class="floatL"><a class="comment-remove" id="<?php echo $comment_id; ?>">Remove comment</a></small>
                    <?php } else if($signed_in) { ?>
                        <small class="floatL"><a class="comment-reply" id="<?php echo $comment_id; ?>" >Reply</a></small>
                    <?php } else { ?>
                        <small class="floatL"><a href="signin.php" class="ilightbox" id="signin-reply" data-options="width:310, height:300">Sign in to reply to this comment</a></small>
                    <?php } ?>
                    </div>
                </div>
                <!--END POSTED COMMENT-->

                <!--REPLY BOX -->
                    <div class="reply-box clearfix">
                        <?php if($signed_in) { ?>
                        <!-- comment input textarea -->
                        <div id="comment-box" class="container">
                            <form id="reply-form">
                                <textarea id="reply" rows="1" placeholder="Your reply here..."></textarea>
                                <p style="padding-top: 15px;"><input id="reply-btn" type="submit" class="btn btn-primary floatL" value="Post reply" /></p>
                                <p style="color:red; padding-left: 140px;" id="error"></p>
                            </form>
                        </div>
                        <?php } ?>
                    </div>
                <!--END REPLY BOX-->

<!--POSTED COMMENT-->
                <div id="comment-139" class="media">
                    <div class="pull-left">
                        <a href="#"><img style="height: 48px; width: 48px;" src="members/nicklaw/assassin_creed_black_flag _2-140x140.jpg" class="img-rounded" alt=""></a>
                        <div style="font-size:1.2em">
                            <a style="color: #888888;" href="#">
                                <span class="glyphicon glyphicon-thumbs-up"></span>
                            </a>
                            <a style="color: #888888;" href="#">
                                <span class="glyphicon glyphicon-thumbs-down"></span>
                            </a>
                        </div>
                    </div>
                    <div class="media-body">
                    <h5 style="margin: 0 0 5px 0;"><a href="#">nicklaw</a><small>&nbsp;&nbsp;9 seconds ago</small><small style="margin-right: 20px;" class="floatR"><a id="comment-flagged" href="#"><span style="color: #5A5A5A" title="Flag as inappropriate" class="glyphicon glyphicon-flag"></span></a></small></h5>
                    <p class="clearfix" style="margin-bottom:0px;">this is a comment</p>
                                                <small class="floatL"><a class="comment-reply" id="139" >Reply</a></small>
                        <small class="floatL"><a class="comment-remove" id="139">Remove comment</a></small>
                                            </div>
                </div>
                <!--END POSTED COMMENT-->

                <!--REPLY BOX -->
                    <div class="reply-box clearfix">
                                                    <!-- comment input textarea -->
                        <div id="comment-box" class="container">
                            <form id="reply-form">
                                <textarea id="reply" rows="1" placeholder="Your reply here..."></textarea>
                                <p style="padding-top: 15px;"><input id="reply-btn" type="submit" class="btn btn-primary floatL" value="Post reply" /></p>
                                <p style="color:red; padding-left: 140px;" id="error"></p>
                            </form>
                        </div>
                                                </div>
                <!--END REPLY BOX-->

<!DOCTYPE html>
<html>
<head>
    <script src="http://code.jquery.com/jquery-1.10.2.js"></script>
</head>
<body>
    <div class="comments-container">
      <div class="comment">
        Comment1
        <a href="#">comment</a><br>
        <textarea></textarea>
      </div>
      <div class="comment">
        Comment2
        <a href="#">comment</a><br>
        <textarea></textarea>
      </div>
      <div class="comment">
        Comment3
        <a href="#">comment</a><br>
        <textarea></textarea>
      </div>
    </div>
    <script>
      $("textarea").hide();
      $(".comments-container").on("click","a",function(e){
          e.preventDefault();
          $("textarea").hide();
          $(this.parentElement.getElementsByTagName("textarea")[0])
            .stop().slideToggle("fast");
      });
    </script>
</body>
</html>