<body class="container-fluid"> <div class="container"> <h1 id = "changeBg" title = "Click here to change the background"> My To-do List </h1> <form> <div class = "inputList"> <input type="text" id="inputUser" placeholder="Type your task here - minimum four characters" class="textfield"> <ul id="list"> </ul> </div> <div class = "myBtn"> <button type= "button" id ="addBtn" title = "Add Task"><i class="fas fa-plus"></i></button> <button type= "button" id ="removeBtn"><i class="fas fa-trash-alt"></i></button> </form> </div>这是我的 html 文件 $(function () { var myTaskArray = []; $("#addBtn").click(function () { var newItem = $('#inputUser').val(); myTaskArray.push(newItem); if (myTaskArray.length > 10) { alert("Your Schedule for today is now full!"); $('#inputUser').val(''); return; } else if (newItem.trim() == "" || newItem.length < 3) { alert("You need to write a task"); } else { $("#list").append("<li><input type = 'checkbox' id = 'checkbox'>" + " " + newItem + "</li>"); $("input:checkbox").click(function () { var $this = $(this); if (this.checked) { $this.parent().addClass('completed'); } else { $this.parent().removeClass('completed'); } }); } $('#inputUser').val(''); }); //remove item on the list $("#removeBtn").click(function () { $('#list').children().filter(function () { return this.firstChild.checked; }).remove(); }); });这是我的 js 文件。我设置了最多 10 个用户输入的限制，它按原样工作，但是当我通过删除按钮删除一些值时，该值的索引不会从数组中删除并使其再次可用于输入。无论如何我可以解决这个问题吗？
1 回答
慕容708150
TA贡献1831条经验 获得超4个赞
您不是将列表限制为 10 个项目，而是限制为 11 个项目。使用
<=运算符 (<= 10) 或< 11将其限制为 10 个项目。您正在向数组中添加项目，即使文本为空或列表已满。移动
myTaskArray.push()的else声明。myTaskArray删除待办事项列表项时，您永远不会更新数组。请参阅我的代码示例，了解如何使用Array.prototype.filter().
（出于演示目的，我将列表限制为 3 个项目，并在添加或删除列表项目时添加了底层数组的日志记录）
$(function() {
var myTaskArray = [];
$("#addBtn").click(function() {
var newItem = $('#inputUser').val();
if (myTaskArray.length >= 3) {
alert("Your Schedule for today is now full!");
$('#inputUser').val('');
return;
} else if (newItem.trim() == "" || newItem.length < 3) {
alert("You need to write a task");
} else {
myTaskArray.push(newItem);
console.clear();
console.log("myTaskArray:", myTaskArray);
$("#list").append("<li><input type = 'checkbox' id = 'checkbox'>" + " " + newItem + "</li>");
$("input:checkbox").click(function() {
var $this = $(this);
if (this.checked) {
$this.parent().addClass('completed');
} else {
$this.parent().removeClass('completed');
}
});
}
$('#inputUser').val('');
});
//remove item on the list
$("#removeBtn").click(function() {
let itemsToRemove = [];
$('#list').children().filter(function(index) {
let removeThis = this.firstChild.checked;
if (removeThis) {
itemsToRemove.push(index);
}
return removeThis;
}).remove();
myTaskArray = myTaskArray.filter(function(value, index) {
return !itemsToRemove.includes(index)
});
console.clear();
console.log("myTaskArray:", myTaskArray);
});
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<h1 id="changeBg" title="Click here to change the background"> My To-do List </h1>
<form>
<div class="inputList">
<input type="text" id="inputUser" placeholder="Type your task here - minimum four characters" class="textfield">
<ul id="list"> </ul>
</div>
<div class="myBtn">
<button type="button" id="addBtn" title="Add Task"><i class="fas fa-plus">+</i></button>
<button type="button" id="removeBtn"><i class="fas fa-trash-alt">x</i></button>
</div>
</form>
<!-- these line breaks are only added so the console doesn't overlay the UI in the stack snippet preview -->
<br><br><br><br><br>
一些后续的想法：
可用性：允许使用输入中的回车键添加项目（当前提交表单）
可用性：当列表已满时禁用输入字段，显示信息消息或至少更改输入占位符文本而不是允许用户键入，但在输入时显示错误消息并完全擦除用户输入
也许使用像Vue.js这样的反应式框架，它使用底层数组来呈现列表，而不必手动更新数据和表示。
添加回答
举报
0/150
提交
取消