使用 jquery 切换按钮回复和编辑以在单击时显示表单时出现问题

Question

我需要在单击编辑和回复按钮时显示表单。这是一个评论系统。而这个系统是由嵌套的评论组成的（分别是评论和回复，一级无序列表和二级无序列表）。但是我的 jQuery 脚本没有按照我希望的方式工作。我希望他们一次显示和隐藏，隐藏和显示一个。当我点击一个时，它显示。当我点击另一个时，显示的那个消失了，我点击的那个（按钮）使表格按时显示。依此类推，无论位置如何，无论此按钮是在主要还是次要无序列表 ("ul") 中。表格也是如此。但这并没有发生。发生的情况是，当我在任何位置单击任何按钮时，表单都会完全消失，而当我再次单击它时，它（表单）就不再显示了。这是我的代码：

    <html>
<head>
<title>Test it!</title>
<link rel="stylesheet" type="text/css" href="test.css"/>
</head>
<body>
<div>
<ul class="list-of-comments">
<div class="allcomments">
    <li class="noofcomments">
        <div class="comment-wrap">
            <div class="commentator-pic"></div>
            <div class="comment">Comments show here</div>
            <!--This is the position of the edit form-->
            <div class="edit-form">
                <form enctype="multipart/form-data" method="post" action="">
                    <textarea class="subcomment" name="subcomment" cols="50" rows="4">Edit comment</textarea>
                    <input type="submit" name="edit" value="Submit">
                </form>
            </div>
            <br>
            <!--These are the main comment buttons or controllers-->
            <button class="edit-comment">Edit</button>
            <button class="reply">Reply</button>
            <button>Delete</button>
            <!--This is the position of the reply form-->
            <div class="reply-to-comment">
                <form enctype="multipart/form-data" method="post" action="">
                    <textarea class="subcomment" name="subcomment" cols="50" rows="4">Submit comment</textarea>
                    <input type="submit" name="reply" value="Submit">
                </form>
            </div>
        </div>
        <!--Here we have the replies to the comment above-->
        <ul class="replies">
            <li class="clicktoviewreplies">Show/hide replies</li>
            <div class="replies-wrap">
                <div class="commentator-pic"></div>
                <div class="replies-to-comment">Replies show here</div>
                <!--This is the position of the edit form-->
                <div class="edit-form">
                    <form enctype="multipart/form-data" method="post" action="">
                        <textarea class="subcomment" name="subcomment" cols="50" rows="4">Edit reply</textarea>
                        <input type="submit" name="edit" value="Submit">
                    </form>
                </div>
                <br>
                <!--These are the main comment buttons or controllers-->
                <button class="edit-comment">Edit</button>
                <button class="reply">Reply</button>
                <button>Delete</button>
                <!--This is the position of the reply form-->
                <div class="reply-to-comment">
                    <form enctype="multipart/form-data" method="post" action="">
                        <textarea class="subcomment" name="subcomment" cols="50" rows="4">Submit reply</textarea>
                        <input type="submit" name="reply" value="Submit">
                    </form>
                </div>
            </div>
        </ul>
    </li>
</div>
</ul>
</div>
<!--This is the FIRST SCRIPT-->
<script src="https://ajax.aspnetcdn.com/ajax/jQuery/jquery-3.3.1.min.js"></script> 
<script>
    $(document).ready(function(){
      //$(document).on('click' , '.reply' , function(){
      $('.reply').click(function(){
         var closestDiv = $(this).closest('div'); // also you can use $(this).parent()
         $('.reply-to-comment').not(closestDiv.next('.reply-to-comment')).css("display", "none");
         closestDiv.next('.reply-to-comment').slideToggle(100);
      });
    });
</script>

<!--This is the SECOND SCRIPT-->
<script>
    $(document).ready(function(){
      //$(document).on('click' , '.edit-comment' , function(){
      $('.edit-comment').click(function(){ 
         var closestDivtwo = $(this).closest('div'); // also you can use $(this).parent()
         $('.edit-form').not(closestDivtwo.prev('.edit-form')).css('display', 'none');
         closestDivtwo.prev('.edit-form').slideToggle(100);
         //$(this).prev('.edit-form').slideToggle(100);
      });
    });
</script>

</body>
</html>

好吧，看看我的第一个和第二个脚本并得出自己的结论。会发生什么？更详细一点：有四个按钮（编辑回复评论，编辑回复回复）和四个表单（编辑回复表单，编辑回复表单，回复回复表单），四个类.

这是css:

    .reply-to-comment{
    display:block;
    }

.edit-form{
    display:block;
    }

Answer 1

尝试使用 find() 方法，而不是 prev() 或 next()。像这样：

<script>
    $(document).ready(function(){
      //$(document).on('click' , '.edit-comment' , function(){
      $('.edit-comment').click(function(){ 
         var closestDivtwo = $(this).closest('div'); // also you can use $(this).parent()
         $('.edit-form').not(closestDivtwo.find('.edit-form')).css('display', 'none');
         closestDivtwo.find('.edit-form').slideToggle(100);
      });
    });
</script>

看看能不能解决问题。

使用 jquery 切换按钮回复和编辑以在单击时显示表单时出现问题

problems toggling buttons reply and edit to show forms on click using jquery

jquery

html

list

comments