Question

我正在尝试发表评论回复部分。我正在加载相同的div用于回复，我用$('#1').append($('.enterComment').html());进行评论，其中1是div的id，将在点击回复时显示。

.enterComment div包含一个隐藏的submitPost按钮，一旦用户开始输入注释，该按钮就会显示。

div正在正确加载，但对我来说问题是，当我在回复部分加载相同的div并且我开始键入任何内容时，它只显示主注释div中的隐藏div而不是回复中的div。

我的HTML是

<div class="enterComment">
      <form id="insertComment">

          <textarea name="comment" placeholder="comment here..."></textarea>

          <div id="commentOptions">
             <button type="button" class="btn btn-primary btn-sm">Comment</button>
          </div>
        </form>
    </div>

我有回复

    <ul class="commentList">
         <li>
             <div class="commentData" id="1">
                <p>The comment content will go here</p>
                <p><span class="reply">Reply</span> <i class="fa fa-thumbs-up" aria-hidden="true" tabindex="1"></i> <i class="fa fa-thumbs-down" aria-hidden="true" tabindex="1"></i> </p>
              </div>
          </li>
       </ul>

和脚本是

$("body").on('focus', 'textarea', function() {
     $('#commentOptions').fadeIn(1000);
}); 

  $("body").on('click', '#1 p .reply', function() {
       $('#1').append($('.enterComment').html()); 
  });

Answer 1

您需要淡入div textarea .next()，因此请使用commentOptions。

此外，HTML中的标识符必须是唯一的，因此使用CSS类。在示例中，我使用了$("body").on('focus', 'textarea', function() { $(this).next('.commentOptions').fadeIn(1000); }); $("body").on('click', '.commentData p .reply', function() { var element = $('.enterComment').clone(); element.find('.commentOptions').hide(); $(this).closest('.commentData').append(element); }); CSS类。

.commentOptions {
  display: none
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="enterComment">
  <form id="insertComment">
    <textarea name="comment" placeholder="comment here..."></textarea>
    <div class="commentOptions">
      <button type="button" class="btn btn-primary btn-sm">Comment</button>
    </div>
  </form>
</div>


<ul class="commentList">
  <li>
    <div class="commentData" id="1">
      <p>The comment content will go here</p>
      <p><span class="reply">Reply</span> <i class="fa fa-thumbs-up" aria-hidden="true" tabindex="1"></i> <i class="fa fa-thumbs-down" aria-hidden="true" tabindex="1"></i> </p>
    </div>
  </li>
</ul>

{{1}}

Answer 2

我已经在一个HTML文件中创建了一个答案，除了您在示例中使用的jQuery和Bootstrap之外，它没有依赖性：

<!DOCTYPE html>
<html>
<head>
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
  <style type="text/css">
    body{
      padding: 10px;
    }

    .wrapper{
      width: 800px;
      margin-right: auto;
      margin-left: auto;
    }

    .submit-comment-btn-container {
      display: none;
    }
  </style>

  <script type="text/javascript">
    $( document ).ready(function() {
      $('#comment-textarea').on('focus', function() {
        $('.submit-comment-btn-container').fadeIn('fast');
      }); 

      $('#submit-comment-btn').on('click', function() {
        var text = $('#comment-textarea').val();
        if(text != ''){
          $('.submit-comment-btn-container').fadeOut();
          $('#comment-textarea').val('');
          // cloning the first child of the comments to use as a template
          var comment = $('.comment-list').children().first().clone();
          // replacing the content of the cloned comment with the new text
          $(comment).html(text);
          // appending the new comment to the comment list
          $(comment).appendTo('.comment-list');

        }
      });
    });
  </script>
</head>

<body>
  <div class="wrapper">
    <div class="enterComment">
      <form id="insertComment">
        <div class="comment-text-container">
          <textarea id="comment-textarea" placeholder="Comment here..."></textarea>
        </div>
        <div class="submit-comment-btn-container">
          <button id="submit-comment-btn" type="button" class="btn btn-primary btn-sm">Comment</button>
        </div>
      </form>   
    </div>
    <div class="comment-list-container">
      <ul class="comment-list">
        <li>
          <div class="comment">
            Comment goes here
          </div>
        </li>
      </ul>
    </div>
  </div>
</body>
</html>

jQuery没有动态生成相同的div

2 个答案: