个人中心
文章发布
退出
作者热门文章
- html - 出于某种原因，IE8 对我的 Sass 文件中继承的 html5 CSS 不友好？
- JMeter 在响应断言中使用 span 标签的问题
- html - 在 :hover and :active? 上具有不同效果的 CSS 动画
- html - 相对于居中的 html 内容固定的 CSS 重复背景？
24
4
我有一个关于 DOM 操作的简单 todoApp。
const classNames = {
TODO_ITEM: 'todo-container',
TODO_CHECKBOX: 'todo-checkbox',
TODO_TEXT: 'todo-text',
TODO_DELETE: 'todo-delete',
}
const list = document.getElementById('todo-list')
const itemCountSpan = document.getElementById('item-count')
const uncheckedCountSpan = document.getElementById('unchecked-count')
let count = 0;
let checkedCount = 0;
let todo;
function newTodo() {
todo = prompt("Please enter to do task","enter here")
count++;
const markup = `<li><input type="checkbox" id=${todo} name="feature"
value=${todo} data-ischecked = "false" />
<label for=${todo}>${todo}</label></li>`
list.insertAdjacentHTML("beforeend",markup)
itemCountSpan.innerHTML = count;
document.getElementById(todo).addEventListener("click",check);
}
function check(){
let article = document.getElementById(todo);
if(article.dataset.ischecked == "false"){
article.dataset.ischecked = "true";
checkedCount++;
uncheckedCountSpan.innerHTML = checkedCount
}
else{
article.dataset.ischecked = "false";
checkedCount--;
uncheckedCountSpan.innerHTML = checkedCount
}
}<!DOCTYPE html>
<html>
<head>
<title>TODO App</title>
<link rel="stylesheet" type="text/css" href="./styles.css" />
</head>
<body>
<div class="container center">
<h1 class="center title">My TODO App</h1>
<div class="flow-right controls">
<span>Item count: <span id="item-count">0</span></span>
<span>Unchecked count: <span id="unchecked-count">0</span></span>
</div>
<button class="button center" onClick="newTodo()">New TODO</button>
<ul id="todo-list" class="todo-list"></ul>
</div>
<script src="./script.js"></script>
</body>
</html>但是，检查的功能并不是我所期望的。当我单击复选框时，总值应相应增加/减少，但数字在 0 和 1 之间切换。
有什么方法可以解决这个问题吗？谢谢
最佳答案
为什么你的不起作用
您将最近添加的项目的 ID 存储为名为 todo 的变量。这意味着在您的 check() 函数中，该行...
let article = document.getElementById(todo);
...将始终引用最后添加的项目。它只是在最后一项上来回切换 data-ischecked 。
如何修复
您希望点击事件引用正在点击的复选框。。我们可以通过向 check() 函数添加一个名为 event 的参数来实现这一点。这样，event.target 将允许我们引用被单击的元素。
function check(event) {
let article = event.target; //This is the clicked checkbox!
}
(鉴于此，todo 变量不再需要是全局变量。)
另一重要说明
我强烈建议不要使用 todo 作为元素 ID，因为您的 ID 中不能有空格。任何时候输入带有空格的待办事项时，您当前的代码都会抛出错误。
鉴于您不允许删除项目，您可以将其设置为 "todo-"+ count 之类的内容，以便您的 ID 为 todo-0、todo-1、todo-2 等
我也在下面的代码中实现了这一点，允许您在待办事项中添加空格。
const classNames = {
TODO_ITEM: 'todo-container',
TODO_CHECKBOX: 'todo-checkbox',
TODO_TEXT: 'todo-text',
TODO_DELETE: 'todo-delete',
}
const list = document.getElementById('todo-list')
const itemCountSpan = document.getElementById('item-count')
const uncheckedCountSpan = document.getElementById('unchecked-count')
let count = 0;
let checkedCount = 0;
function newTodo() {
var todo = prompt("Please enter to do task", "enter here");
var newId = "todo" + count;
count++;
const markup = `<li><input type="checkbox" id=${newId} name="feature"
value=${todo} data-ischecked = "false" />
<label for=${todo}>${todo}</label></li>`
list.insertAdjacentHTML("beforeend", markup)
itemCountSpan.innerHTML = count;
document.getElementById(newId).addEventListener("click", check);
}
function check(event) {
let article = event.target;
if (article.dataset.ischecked == "false") {
article.dataset.ischecked = "true";
checkedCount++;
uncheckedCountSpan.innerHTML = checkedCount
} else {
article.dataset.ischecked = "false";
checkedCount--;
uncheckedCountSpan.innerHTML = checkedCount
}
}<!DOCTYPE html>
<html>
<head>
<title>TODO App</title>
<link rel="stylesheet" type="text/css" href="./styles.css" />
</head>
<body>
<div class="container center">
<h1 class="center title">My TODO App</h1>
<div class="flow-right controls">
<span>Item count: <span id="item-count">0</span></span>
<span>Unchecked count: <span id="unchecked-count">0</span></span>
</div>
<button class="button center" onClick="newTodo()">New TODO</button>
<ul id="todo-list" class="todo-list"></ul>
</div>
<script src="./script.js"></script>
</body>
</html>关于javascript - 一个简单的todoApp复选框问题，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/51413657/
24
4
0
我正在尝试使用 angular2-universal 进行服务器渲染。我复制粘贴官方 repo 的示例待办事项应用程序 https://github.com/angular/universal/tre
我正在编写一个简单的待办事项应用程序并在 listView 上工作。按照教程 http://www.vogella.com/tutorials/AndroidListView/article.html
亲爱的，请告知如何正确显示每个待办事项的作者。我将authorId添加到Todos集合中，制作了帮助程序并更正了发布，但它不起作用:我在浏览器中看到作者的个人资料，但不知道如何将名称传递给todo。
我是一名优秀的程序员,十分优秀！