使用 jQuery 向视频添加评论

Question

我想用 jQuery 对视频进行动态评论，但是当我评论我正在做的事情时，旧评论会发生变化，并且所有 cmets 都会收到相同的文本。我从输入中获得的值被写入所有 cmets。我该如何解决这个问题？

$(document).ready(function() {
  $("#addCommentBtn").click(function() {
    var comment = $("#commentText").val();
    if (comment === "") {
      $("#error-msg").fadeIn();
      setTimeout(function() {
        $("#error-msg").fadeOut();
      }, 3000);
    } else {
      $('<li class="w-full comment mt-4"><div class="w-full md:w-1/2 comment flex flex-col"><div class="flex gap-4 items-center text-lg font-bold"><img src="assets/media/svg/NoPath - Kopya (75).png" class="rounded-full" alt=""><h1>André Potchinka</h1></div><div class="ml-16 flex flex-col justify-center"><div class=" mt-2 flex gap-1 items-center"><h1 class="comment-content text-gray-500 font-bold"></h1><span class="flex gap-2 -mt-1"><i class="fas fa-thumbs-up" aria-hidden="true"></i>0</span><span class="flex gap-2 -mt-1"><i class="fas fa-thumbs-down" aria-hidden="true"></i>0</span></div><div class="w-full flex flex-col"><input type="text" class="responseText border-b focus:outline-none bg-transparent mt-4" placeholder="Please login to leave a comment..."><ul class="responses p-4 flex flex-col gap-2">  </ul><button class="responseBtn text-right mt-2 text-gray-500">Answer</button></div></div></div></li>').appendTo(".comments");
      $(".comment-content").text(comment);
      $("#commentText").val("");
      $("#valid-msg").fadeIn();
      setTimeout(function() {
        $("#valid-msg").fadeOut();
      }, 3000);
    }
  });
});

<link href="https://unpkg.com/tailwindcss@^2/dist/tailwind.min.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="comments" class="hidden p-4">
  <div class="container mx-auto">
    <div class="w-full flex gap-4">
      <img src="assets/media/svg/Group 199.png" alt="">
      <input type="text" required id="commentText" class="pt-4 flex-1 focus:outline-none border-b border-gray-500 py-1 px-2 bg-transparent" placeholder="Please login to leave a comment...">
    </div>
    <div class="w-full flex gap-4 justify-end items-center mt-4">
      <a href="#" class="text-gray-500">Cancel</a>
      <button id="addCommentBtn" class="focus:outline-none bg-black px-6 border border-black py-1 rounded-full text-gray-500 flex items-center pt-3">Comment</button>
    </div>
    <ul class="w-full comments">
      <li class="w-full comment mt-4">
        <div class="w-full md:w-1/2 comment flex flex-col">
          <div class="flex gap-4 items-center text-lg font-bold">
            <img src="assets/media/svg/NoPath - Kopya (75).png" class="rounded-full" alt="">
            <h1>André Potchinka</h1>
          </div>
          <div class="ml-16 flex flex-col justify-center">
            <div class=" mt-2 flex gap-1 items-center">
              <h1 class="text-gray-500 font-bold">Nice work, congragulations.</h1>
              <span class="flex gap-2 -mt-1"><i class="fas fa-thumbs-up"></i>0</span>
              <span class="flex gap-2 -mt-1"><i class="fas fa-thumbs-down"></i>0</span>
            </div>
            <div class="w-full flex flex-col">
              <input type="text" class="responseText border-b focus:outline-none bg-transparent mt-4" placeholder="Please login to leave a comment...">
              <ul class="responses p-4 flex flex-col gap-2 text-gray-500">
                <li>Yoruma yanıt verildi :)</li>
              </ul>
              <div class="flex justify-end">
                <button class="responseBtn mt-2 text-gray-500 w-24 text-center">Answer</button>
              </div>
            </div>
          </div>
        </div>
      </li>
    </ul>
  </div>
</div>

Answer 1

使用选择器.comment-content，您将选择该类的所有元素，因此当然所有 cmets 的文本内容都将被覆盖。将新元素保存到变量中，并将类选择器限制在该新元素上：

$(document).ready(function() {
  $("#addCommentBtn").click(function() {
    var comment = $("#commentText").val();
    if (comment === "") {
      $("#error-msg").fadeIn();
      setTimeout(function() {
        $("#error-msg").fadeOut();
      }, 3000);
    } else {
      let newComment = $('<li class="w-full comment mt-4"><div class="w-full md:w-1/2 comment flex flex-col"><div class="flex gap-4 items-center text-lg font-bold"><img src="assets/media/svg/NoPath - Kopya (75).png" class="rounded-full" alt=""><h1>André Potchinka</h1></div><div class="ml-16 flex flex-col justify-center"><div class=" mt-2 flex gap-1 items-center"><h1 class="comment-content text-gray-500 font-bold"></h1><span class="flex gap-2 -mt-1"><i class="fas fa-thumbs-up" aria-hidden="true"></i>0</span><span class="flex gap-2 -mt-1"><i class="fas fa-thumbs-down" aria-hidden="true"></i>0</span></div><div class="w-full flex flex-col"><input type="text" class="responseText border-b focus:outline-none bg-transparent mt-4" placeholder="Please login to leave a comment..."><ul class="responses p-4 flex flex-col gap-2">  </ul><button class="responseBtn text-right mt-2 text-gray-500">Answer</button></div></div></div></li>').appendTo(".comments");
      $(".comment-content", newComment).text(comment);
      $("#commentText").val("");
      $("#valid-msg").fadeIn();
      setTimeout(function() {
        $("#valid-msg").fadeOut();
      }, 3000);
    }
  });
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="comments" class="hidden p-4">
  <div class="container mx-auto">
    <div class="w-full flex gap-4">
      <img src="assets/media/svg/Group 199.png" alt="">
      <input type="text" required id="commentText" class="pt-4 flex-1 focus:outline-none border-b border-gray-500 py-1 px-2 bg-transparent" placeholder="Please login to leave a comment...">
    </div>
    <div class="w-full flex gap-4 justify-end items-center mt-4">
      <a href="#" class="text-gray-500">Cancel</a>
      <button id="addCommentBtn" class="focus:outline-none bg-black px-6 border border-black py-1 rounded-full text-gray-500 flex items-center pt-3">Comment</button>
    </div>
    <ul class="w-full comments">
      <li class="w-full comment mt-4">
        <div class="w-full md:w-1/2 comment flex flex-col">
          <div class="flex gap-4 items-center text-lg font-bold">
            <img src="assets/media/svg/NoPath - Kopya (75).png" class="rounded-full" alt="">
            <h1>André Potchinka</h1>
          </div>
          <div class="ml-16 flex flex-col justify-center">
            <div class=" mt-2 flex gap-1 items-center">
              <h1 class="text-gray-500 font-bold">Nice work, congragulations.</h1>
              <span class="flex gap-2 -mt-1"><i class="fas fa-thumbs-up"></i>0</span>
              <span class="flex gap-2 -mt-1"><i class="fas fa-thumbs-down"></i>0</span>
            </div>
            <div class="w-full flex flex-col">
              <input type="text" class="responseText border-b focus:outline-none bg-transparent mt-4" placeholder="Please login to leave a comment...">
              <ul class="responses p-4 flex flex-col gap-2 text-gray-500">
                <li>Yoruma yanıt verildi :)</li>
              </ul>
              <div class="flex justify-end">
                <button class="responseBtn mt-2 text-gray-500 w-24 text-center">Answer</button>
              </div>
            </div>
          </div>
        </div>
      </li>
    </ul>
  </div>
</div>