Применить text-decoration: линия до сгенерированных флажков
Я заканчиваю последнюю часть приложения со списком задач, которое я создаю. В основном пользователи создают задачи, которые отображаются на экране вместе с флажком и значком корзины справа от него. По большей части приложение работает как надо. Последнее, что мне нужно сделать, это сделать так, чтобы, когда пользователь щелкает флажок, срабатывал эффект 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 [JS]](https://i.imgur.com/WsjO6zJb.png)
Ответы 1
Довольно простой способ добавить эффект сквозной линии при щелчке по флажку и удалить эффект, когда флажок снят, — это использовать метод toggle для переключения готового класса с эффектом сквозной линии. Этот класс не должен быть включен по умолчанию, потому что вам не нужен эффект сквозной линии сразу. Когда вы установите флажок, он включит класс. Когда вы снимите флажок, он отключит класс.
HTML должен быть примерно таким:
<ul>
<li> Todo Item <input .....> </li>
Затем создайте класс CSS для переключения вашего кода:
.lineThrough {
text-decoration: line-through;
}
Код jQuery будет выглядеть так:
$("ul").on("click", "li", function(){
$(this).toggleClass("lineThrough");
});