我使用 jquery 和 html/css 制作了一个 ToDo 列表。我复制了容器两次，并在第二个容器中设置了不同类的父类。但是，每当我对其进行测试并将任何内容添加到一个容器时，它都会将其添加到所有容器中，甚至使用单独的类。我希望每个容器都有自己的列表。
$("ul").on("click", "li", function(){
$(this).toggleClass("completed");
});
//click on x to delete todo
$("ul").on("click", "span", function(event){
$(this).parent().fadeOut(500, function(){
$(this).remove();
});
event.stopPropagation();
});
$("input[type='text']").keypress(function(event){
if(event.which === 13){
var todoText = $(this).val();
$(this).val("");
$("ul").append("<li><span><i class='fa fa-trash'></span></i>" + todoText + "</li>")
}
});
$(".fa-pencil").click(function(){
$("input[type='text'").fadeToggle();
})
//second div - this is where I used the classes
$(".list2").on("click", "li", function(){
$(this).toggleClass("completed");
});
$(".list2").on("click", "span", function(event2){
$(this).parent().fadeOut(500, function(){
$(this).remove();
});
event2.stopPropagation();
});
$(".txt2").keypress(function(event2){
if(event2.which === 13){
var todoText = $(this).val();
$(this).val("");
$("list.2").append("<li class='li2'><span><i class='fa fa-trash'></span></i>" + todoText + "</li>")
}
});
这是 html:
<html>
<head>
<link rel="stylesheet" type= "text/css" href="assets/main.css">
<script type="text/javascript" src="assets/js/lib/jquery-3.2.1.min.js"></script>
<link href="https://fonts.googleapis.com/css?family=Oswald|Roboto" rel="stylesheet"></head>
<link rel="stylesheet" type="text/css " href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
<body>
<div class= tablets>
<div id="container">
<h1>To-Do List <i class="fa fa-pencil"></i></h1>
<input type="text" placeholder="What are you going to do today?">
<ul>
<li><span><i class="fa fa-trash"></i></span> Work out 1 hour</li>
<li><span><i class="fa fa-trash"></i></span> Listen podcast 1 hour</li>
<li><span><i class="fa fa-trash"></i></span> Learn UX lesson</li>
</ul>
</div>
<div id="container">
<h1>To-Do List <i class="fa fa-pencil"></i></h1>
<input type="text" class= "txt2" placeholder="What are you going to do today?">
<ul class= "list2">
<li class="li2"><span><i class="fa fa-trash"></i></span> Work out 1 hour</li>
<li class="li2"><span><i class="fa fa-trash"></i></span> Listen podcast 1 hour</li>
<li class="li2"><span><i class="fa fa-trash"></i></span> Learn UX lesson</li>
</ul>
</div>
</div>
</body>
<script type="text/javascript" src="source.js"></script>
</html>
最佳答案
我认为这可能是一个简单的错字，您有 $("list.2").append 并且它应该是 $(".list2").append
关于javascript - 如何将相同的 jquery 添加到不同的 div 但具有不同的内容？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/44005691/