使用 jQuery 向视频添加评论
Adding comments to video with jQuery
我想使用 jQuery 对视频进行动态评论，但是当我对我正在做的事情发表评论时，旧评论会发生变化，所有评论都会收到相同的文本。我从输入中获得的值被写入所有评论。我该如何解决这个问题？
$(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>
使用选择器 .comment-content，您选择了带有 class 的所有元素，因此当然所有评论的文本内容都会被覆盖。将新元素保存到一个变量中，并将 class 选择器限制在该新元素上：
$(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>
我想使用 jQuery 对视频进行动态评论，但是当我对我正在做的事情发表评论时，旧评论会发生变化，所有评论都会收到相同的文本。我从输入中获得的值被写入所有评论。我该如何解决这个问题？
$(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>
使用选择器 .comment-content，您选择了带有 class 的所有元素，因此当然所有评论的文本内容都会被覆盖。将新元素保存到一个变量中，并将 class 选择器限制在该新元素上：
$(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>