我一直在使用 jQuery 制作一个简单的待办事项列表，但遇到了一些问题。我创建了一个工作得相当好的编辑按钮，但我希望这样当我按下 Enter 时，文本框就会变为未选中状态，并且文本不再可编辑，直到再次单击编辑按钮。
我还尝试添加一个“清除已完成”按钮，该按钮将清除所有“已检查”项目，但似乎无法定位要删除的正确项目。任何提示将不胜感激!
$(document).ready(function() {
$("#todo").focus();
function addItem() {
$("#todo-items").append("<li><input type='checkbox' class='done'/><span>" + $("#todo").val() + "</span><button class='delete'>Delete</button><button class='edit'>Edit</button></li>");
$("#todo").val("");
}
//add item when enter is pressed
$("#todo").keydown(function(e) {
if (e.which == 13)
addItem();
});
//add item when "Add" is clicked
$("#add").click(addItem);
//make textbox content editable
$(document).on("click", '.edit', function() {
$(this).closest("li").find("span").prop("contenteditable", true).focus();
//$(this).closest("span").keydown(function(e) {
//if (e.which == 13) return false;
//});
})
//delete item from list
$(document).on("click", '.delete', function() {
$(this).closest("li").fadeOut(function() {
$(this).remove();
});
return false;
})
//strike-through text when checkbox is checked
$(document).on("click", '.done', function() {
if ($(this).closest("li").find("span").css('textDecoration') === 'line-through') {
$(this).closest("li").find("span").css('textDecoration', 'none');
} else {
$(this).closest("li").find("span").css('textDecoration', 'line-through');
}
})
//clear all completed tasks
$(document).on("click", 'clear', function() {
if ($(this).closest("li").find("span").css('textDecoration') === 'line-through') {
$(this).parent().remove();
}
})
});body {
font: sans-serif;
color: #00b33c;
background-color: #ffffff;
}
ul {
list-style: none;
padding: 0;
margin: 0;
width: 700px;
}
li {
border: 2px solid #fff;
background: #e5ffff;
padding: 10px 10px;
color: #000000;
width: 500px;
}
li span {
padding-left: 10px;
padding-right: 200px;
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="jquery-1.11.3.min.js"></script>
<script src="todolistjquery2.js"></script>
<body>
<h1>To Do List</h1>
<div>
<input type="text" id="todo" />
<input type="button" value="Add" id="add" />
</div>
<div id="completed">
<input type="button" value="Clear Completed" id="clear" />
</div>
<ul id="todo-items"></ul>
</body>最佳答案
对于您的疑问:
我希望这样当我按下 Enter 键时，文本框就会变为未选中状态，并且文本将不再可编辑，直到再次单击编辑按钮为止。
使用此代码:
// finalize the edited span $(document).on("keydown", 'span[contenteditable]', function (e) { if (e.which == 13) { $(this).removeAttr("contenteditable").blur(); return false; } });“清除已完成”按钮将清除所有“已选中”项目，但似乎无法定位要删除的正确项目。
您的代码有错误。您需要使用
#clear，而不仅仅是clear。//clear all completed tasks $(document).on("click", '#clear', function() { $(".done:checked").each(function () { $(this).closest("li").remove(); }); })
查看最终工作片段:
$(document).ready(function() {
$("#todo").focus();
function addItem() {
$("#todo-items").append("<li><input type='checkbox' class='done'/><span>" + $("#todo").val() + "</span><button class='delete'>Delete</button><button class='edit'>Edit</button></li>");
$("#todo").val("");
}
//add item when enter is pressed
$("#todo").keydown(function(e) {
if (e.which == 13)
addItem();
});
//add item when "Add" is clicked
$("#add").click(addItem);
//make textbox content editable
$(document).on("click", '.edit', function() {
$(this).closest("li").find("span").prop("contenteditable", true).focus();
//$(this).closest("span").keydown(function(e) {
//if (e.which == 13) return false;
//});
})
//delete item from list
$(document).on("click", '.delete', function() {
$(this).closest("li").fadeOut(function() {
$(this).remove();
});
return false;
})
//strike-through text when checkbox is checked
$(document).on("click", '.done', function() {
if ($(this).closest("li").find("span").css('textDecoration') === 'line-through') {
$(this).closest("li").find("span").css('textDecoration', 'none');
} else {
$(this).closest("li").find("span").css('textDecoration', 'line-through');
}
});
//clear all completed tasks
$(document).on("click", '#clear', function() {
$(".done:checked").each(function () {
$(this).closest("li").remove();
});
})
// finalize the edited span
$(document).on("keydown", 'span[contenteditable]', function (e) {
if (e.which == 13) {
$(this).removeAttr("contenteditable").blur();
return false;
}
});
});body {
font: sans-serif;
color: #00b33c;
background-color: #ffffff;
}
ul {
list-style: none;
padding: 0;
margin: 0;
width: 700px;
}
li {
border: 2px solid #fff;
background: #e5ffff;
padding: 10px 10px;
color: #000000;
width: 500px;
}
li span {
padding-left: 10px;
padding-right: 200px;
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="todolistjquery2.js"></script>
<h1>To Do List</h1>
<div>
<input type="text" id="todo" />
<input type="button" value="Add" id="add" />
</div>
<div id="completed">
<input type="button" value="Clear Completed" id="clear" />
</div>
<ul id="todo-items"></ul>关于javascript - 清除已完成任务按钮待办事项列表，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/34613078/