无法从数组中删除索引并使其再次可用于新输入
<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
您不是将列表限制为 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这样的反应式框架，它使用底层数组来呈现列表，而不必手动更新数据和表示。
随时随地看视频慕课网APP
相关分类
JavaScript