Question

我使用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>

Answer 1

您的＆＃34;＆lt;＆lt; ul＆gt;＆＃34;在代码中。现在，jQuery的目标是所有＆＃34;＆lt; ul＆gt;＆＃34;元素而不是独特元素。

Answer 2

我认为这可能是一个简单的拼写错误，你有$("list.2").append，应该是$(".list2").append

Answer 3

你要追加所有＆lt; ul标签要添加到只有一个ul你必须写

 $(this).siblings("ul").append("<li><span><i class='fa fa-trash'></span></i>" + todoText + "</li>")

而不是

$("ul").append("<li><span><i class='fa fa-trash'></span></i>" + todoText + "</li>")

如何将相同的jquery添加到不同的div但具有不同的内容？

3 个答案: