将新文本添加到待办事项列表时出现问题
为什么当我添加一个新文本时它会添加到所有元素？
$('#btn').on('click', function() {
let newTask = $('#input-text');
if (newTask.val() === '') {
alert('You need to write something');
} else {
let editButton = ('<button class = edit > Edit' + '</button>');
let finishedButton = ('<button class = finished > Finished' + '</button>');
let deleteButton = ('<button class = delete > Delete' + '</button>');
let input = ('<input class= input>');
$('#toDoList').append('<li>' + input + editButton + finishedButton + deleteButton + '</li>');
$('.input').attr('value', newTask.val());
newTask.val('');
}
$('.edit').on('click', function() {
$('.input').prop('disabled', false);
});
$('.finished').on('click', function() {
$(this).parent();
$('#completed').append($(this).parent());
});
$('.delete').on('click', function() {
$(this).parent().fadeOut(500, function() {
$(this).remove();
});
});
});
body {
background-color: ;
}
.container {
display: block;
width: 400px;
margin: 300px auto;
box-shadow: 5px 10px 100px #888888;
min-height: 450px;
max-height: auto;
}
.completed {
margin-top: 3rem;
}
.to-do {
margin-top: 3rem;
}
#btn {
cursor: pointer;
}
.input {
margin-top:
}
.text {
text-align: center;
color: #004690;
}
.color {
color: green;
}
.color1 {
color: red;
}
#input-text {
margin-left: 100px;
}
hr {
width: 50%;
margin-bottom: 1rem;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="css/style.css">
<meta charset="UTF-8">
<title>todo</title>
</head>
<body>
<div class="container">
<h1 class="text">To Do App</h1>
<hr>
<div class="input">
<input id="input-text" type="text" name="" value="">
<button id="btn">Add</button>
</div>
<div class="to-do">
<h3 class="text color1">TO-do-list</h3>
<hr>
<ul id="toDoList">
catspeake1回答
-
慕的地6264312
您的代码有几个问题超出了我决定忽略的问题范围。问题在于这一行，它使用类选择器来选择所有输入并更新它们的值。$('.input').attr('value', newTask.val());最简单的解决方案是使用字符串插值创建包含值的输入标记，如下所示：$('#btn').on('click', function() { let newTask = $('#input-text'); if (newTask.val() === '') { alert('You need to write something'); } else { let editButton = ('<button class = edit > Edit' + '</button>'); let finishedButton = ('<button class = finished > Finished' + '</button>'); let deleteButton = ('<button class = delete > Delete' + '</button>'); // Use string interpolation to create input markup with value already defined let input = `<input class="input" value="${newTask.val()}">`; // Append as usual $('#toDoList').append('<li>' + input + editButton + finishedButton + deleteButton + '</li>'); // Below line is no longer needed so is commented out //$('.input').attr('value', newTask.val()); // Your code continues unmodified newTask.val(''); } $('.edit').on('click', function() { $('.input').prop('disabled', false); }); $('.finished').on('click', function() { $(this).parent(); $('#completed').append($(this).parent()); }); $('.delete').on('click', function() { $(this).parent().fadeOut(500, function() { $(this).remove(); }); });});body { background-color: ;}.container { display: block; width: 400px; margin: 300px auto; box-shadow: 5px 10px 100px #888888; min-height: 450px; max-height: auto;}.completed { margin-top: 3rem;}.to-do { margin-top: 3rem;}#btn { cursor: pointer;}.input { margin-top:}.text { text-align: center; color: #004690;}.color { color: green;}.color1 { color: red;}#input-text { margin-left: 100px;}hr { width: 50%; margin-bottom: 1rem;}<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script><!DOCTYPE html><html><head> <link rel="stylesheet" type="text/css" href="css/style.css"> <meta charset="UTF-8"> <title>todo</title></head><body> <div class="container"> <h1 class="text">To Do App</h1> <hr> <div class="input"> <input id="input-text" type="text" name="" value=""> <button id="btn">Add</button> </div> <div class="to-do"> <h3 class="text color1">TO-do-list</h3> <hr> <ul id="toDoList"> </ul> </div> <div class="completed"> <h3 class="text color">Completed</h3> <hr> <ul id="completed"> </ul> </div> </div> <script type="text/javascript" src="js/jquery-3.4.1.min.js"></script> <script type="text/javascript" src="js/todo.js"></script></body></html>
随时随地看视频慕课网APP
相关分类
JavaScript