我正在完成我正在创建的待办事项列表应用程序的最后一部分。基本上，用户生成的 todo 任务会显示在屏幕上，并在其右侧显示一个复选框和垃圾桶图标。在大多数情况下，该应用程序可以正常运行。我需要做的最后一件事是当用户单击一个复选框时，text-decoration:line through 效果发生并划掉相应的列表项。我曾经有过这个工作，但我不得不改变一些东西，这样调整屏幕大小会更好看。现在我的老办法行不通了。我会发布一些代码，如果有人知道我如何才能让它工作，我将非常感激。感谢大家!
下面的 input:checked + li css 是在我不得不重新排列列表项的生成顺序之前最初的工作方式。
ul {
text-align:right; /*This pushes the checkbox/trash can right while the <li> in the js file floats the todo text left*/
list-style-type:none;
padding-left:0px; /*Makes up for not having the bullet point spacing on smaller screens*/
font-size:24px;
color:white;
font-weight:600;
}
li {
text-align:left;
}
input:checked + li { /*<<<<<------This is what I was using before and it worked*/
text-decoration:line-through;
}
.todo-item::after {
content: "";
clear: both;
display: table;
}
.todo-item {
text-align: right;
}
.todo-item .todo-label {
display: block;
float: left;
max-width: 80%; /* you can increase the size */
text-align: left;
/* you can use this props if you don't want another line
white-space: nowrap;
text-overflow: ellipsis;
overflow: hidden; */
}
</style>
</head>
<body>
<div class="header">
<div class="container" style="padding-top:50px;">
<div class="row justify-content-center"> <!--Input Box-->
<div class="col-sm-12 col-lg-8">
<h1>To-Do List</h1>
<div class="form-group">
<input type="text" class="form-control" id="task">
</div>
</div>
</div>
<div class="row"> <!--Add Button-->
<div class="col"></div>
<div class="col-xs-2" style="margin-right:15px; margin-top:30px;">
<button id="add" style="border-radius:50%; font-size:35px; width:65px;" class="btn btn-danger">+</button>
</div>
</div>
</div>
</div>
<div class="container text" style="display:inline-block;"> <!--ToDos-->
<div class="row justify-content-center" style="margin-top:20px;">
<div class="col-sm-12 col-sm-8">
<div id="todos"></div>
</div>
</div>
</div>
<script src="todo.js"></script>
</body>
</html>
这是用于为待办事项列表开发元素的 javascript。在重新排列之前，复选框是在待办事项列表项之前生成的。现在，它被转移到之后。我想我可以重新安排我的 css 顺序，或者取出 li 部分并用一个类替换它。我在这里运气不佳。
function show() {
var todos = get_todos();
var html = '<ul>';
for(var i=0; i < todos.length; i++) {
html += '<li class="todo-item">' +
'<span class="todo-label">' + todos[i] + '</span>' +
'<input class="checkBox" type="checkbox">' +
'<button class="remove" id="' + i + '">' +
'<i class="fa fa-trash" aria-hidden="true"></i>' +
'</button>' +
'</li>';
};
html += '</ul>';
document.getElementById('todos').innerHTML = html;
var buttons = document.getElementsByClassName('remove');
for (var i=0; i < buttons.length; i++) {
buttons[i].addEventListener('click', remove);
};
}
最佳答案
在单击复选框时添加直通效果并在未单击复选框时删除效果的一种相当简单的方法是使用 toggle 方法来切换具有直通效果的预制类。此类不应默认打开，因为您不希望立即产生直通效果。当您单击该复选框时，它将打开该类。当您取消选中该复选框时，它会关闭该类。
HTML 应该是这样的:
<ul>
<li> Todo Item <input .....> </li>
然后为要切换的代码创建一个 CSS 类:
.lineThrough {
text-decoration: line-through;
}
jQuery 代码如下所示:
$("ul").on("click", "li", function(){
$(this).toggleClass("lineThrough");
});
关于javascript - 应用文本装饰 : line through to generated checkboxes，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/54771110/