Question

我想通过单击“编辑评论”按钮将“ .comment” div替换为“ .edit-form” div。事情在起作用，但并不是我想要的那样。有一个小问题：当我单击主要无序列表（内部列表项）中的任何“编辑按钮”，然后单击次要无序列表的“编辑按钮”时，主要的无序列表会隐藏/消失，但是我不希望这种情况发生，我希望它显示出来，并且不受辅助列表中“编辑注释”按钮效果的影响，如果您完全理解我的话。这是我的jQuery代码：

$(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.find('.reply-to-comment')).css("display", "none");
     closestDiv.find('.reply-to-comment').slideToggle(100);
  });

  //$(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);
     //$(this).next('.edit-form').slideToggle(100);
  });

  //$(document).on('click' , '.edit-comment' , function(){
  $('.edit-comment').click(function(){ 
     var closestDivtwo = $(this).closest('div'); // also you can use $(this).parent()
     //$('.comment').not(closestDivtwo.find('.comment')).fadeOut();
     //closestDivtwo.find('.comment').css('display','block');
     closestDivtwo.find('.comment').toggle();
     //$('.comment').not(closestDivtwo.find('.comment')).slideToggle(100);
  });
});

仅专注于此代码段的第二段和第三段。这是我的HTML：

    <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="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>
</body>
</html>

为使事情变得简单，请访问以下链接：https://jsfiddle.net/hx9mvdjg/8/

Answer 1

这将彻底解决该问题：

//$(document).on('click' , '.edit-comment' , function(){
  $('.edit-comment').click(function(){
      var closestDiv = $(this).closest('div'); // also you can use $(this).parent() 
     if ($(".edit-form").css("display") == "block") {
         closestDiv.find('.comment').hide();
         $('.comment').not(closestDiv.find('.comment')).css("display","block");
     }else{
        closestDiv.find('.comment').toggle();
        $('.comment').not(closestDiv.find('.comment')).css("display","block");
    }
  });

获取您的完整代码，然后将您自己所说的“段落”替换为代码段中的最后一个，然后将其粘贴到“ jsfiddle”中并进行测试。然后，告诉我是否就是您所需要的。

Answer 2

在jquery中使用replaceWith（）。

如何使用jQuery（评论系统）替换Click上的div？

2 个答案: