应用 text-decoration: line through 到生成的复选框答案

【问题标题】：apply text-decoration: line through to generated checkboxes应用 text-decoration: line through 到生成的复选框
【发布时间】：2019-07-13 05:51:09
【问题描述】：

我正在完成我正在创建的待办事项列表应用程序的最后一点。基本上，用户会生成待办事项，这些任务会显示在屏幕上，旁边还有一个复选框和垃圾桶图标。在大多数情况下，该应用程序正在正常工作。我需要做的最后一件事是，当用户单击复选框时，会发生 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);
};
}

【问题讨论】：

标签： javascript css css-selectors pseudo-class

【解决方案1】：

在单击复选框时添加直通效果并在未单击复选框时删除效果的一种相当简单的方法是使用切换方法来切换具有直通效果的预制类。默认情况下不应启用此类，因为您不希望立即使用 line-through 效果。当您单击复选框时，它将打开类。当您取消单击复选框时，它将关闭该类。

HTML 应该是这样的：

<ul>
    <li> Todo Item <input .....> </li>

然后为您的代码创建一个 CSS 类来切换：

.lineThrough {
    text-decoration: line-through;
}

jQuery 代码如下所示：

$("ul").on("click", "li", function(){
    $(this).toggleClass("lineThrough");
});

【讨论】：