Question

我正在整理待创建的待办事项列表应用程序的最后一部分。基本上，用户会生成待办任务，这些任务会显示在屏幕上，并在其右侧显示一个复选框和垃圾桶图标。在大多数情况下，应用程序都可以正常运行。我需要做的最后一件事是，当用户单击复选框时，发生text-decoration：line through effect并划掉相应的列表项。我曾经有过这项工作，但是我不得不改变一些事情，因此调整屏幕大小看起来会更好。现在，我的旧方法将行不通。我会发布一些代码，如果有人知道我如何使它工作，我将非常感激。感谢大家！

下面的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);
};
}

docs

Answer 1

一种相当简单的方法，即在单击复选框时添加直通效果，而在取消单击复选框时删除直通效果，这是使用toggle方法来切换具有直通效果的预制类。默认情况下，此类不应处于启用状态，因为您不希望立即产生穿线效果。当您单击复选框时，它将打开该类。取消选中该复选框后，它将关闭该类。

HTML应该类似于：

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

然后为您的代码创建CSS类以进行切换：

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

jQuery代码如下：

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

套用文字装饰：直行至产生的核取方块

1 个答案: