jQuery .next（）。slideToggle（）不起作用

Question

我正在從頭開始創建自己的評論系統。 注釋本身是從數據庫中的注釋動態生成的，對於每個注釋，我都附加了一個答復文本區域和一個按鈕，供用戶發布對某人的注釋的答復。

問題是，當我單擊回復鏈接時，它會為每個評論打開一個回復框，而不僅僅是用戶希望回復的評論。

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>

和jQuery：

<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>

我究竟做錯了什么？

---

編輯

---

好的，這是完整的HTML：

 <!--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-->

Answer 1

也許下面的代碼會有所幫助，我正在使用當前元素的parentElement，然后獲取同一組中的textarea。 當附加點擊處理程序時，我將div與class comments-container一起使用，並且僅在點擊時附加錨點（ .on函數中的第二個參數）。

<!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>

Answer 2

問題是.reply框在DOM中與單擊的.comment-reply鏈接（即不是同級 ）不在同一級別。 如果您看到.click的文檔，則會看到它僅搜索兄弟姐妹 。

我認為您想要.parents(".media").next(".reply-box")