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

【问题标题】：problems toggling buttons reply and edit to show forms on click using jquery使用 jquery 切换按钮回复和编辑以在单击时显示表单的问题
【发布时间】：2018-12-09 15:43:06
【问题描述】：

当我点击按钮编辑和回复时，我需要显示表单。这是一个评论系统。而这个系统是由嵌套的 cmets 组成的（分别是 cmets 和 replies，primary unordered list 和 secondary unordered list）。但是我的 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;
    }

【问题讨论】：

标签： jquery html list comments

【解决方案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>

看看能不能解决问题。

【讨论】：