Javascript点击功能一次只选择第一个元素或所有元素
[英]Javascript click function only selects the first element or all elements at once
问题描述
I made a simple unordered list with checkboxes and want a class with strikethrough text to be applied to the li that the checkbox belongs to.
我制作了一个带有复选框的简单无序列表，并希望将带有删除线文本的类应用于复选框所属的 li。 The methods I've tried either only work on the first element or get applied to all of them at once.我尝试过的方法要么仅适用于第一个元素，要么立即应用于所有元素。
The HTML: HTML：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="style.css">
<title>Document</title>
</head>
<body>
<h1>Todo List</h1>
<ul>
<li>
<input type="checkbox">
List Item 1
</li>
<li>
<input type="checkbox">
List Item 2
</li>
<li>
<input type="checkbox">
List Item 3
</li>
</ul>
</body>
</html>
The Javascript (only selects the first one): Javascript（只选择第一个）：
document.querySelector("input").addEventListener("click", addStrike);
function addStrike() {
document.querySelector("li").classList.toggle("completed");
}
(selects all at once, when using this code I had the jquery CDN in my html) （一次全部选择，使用此代码时，我的 html 中有 jquery CDN）
$("li").on("click", addStrike);
function addStrike() {
$("li").toggleClass("completed")
}
3 个解决方案
解决方案1
1 2020-02-19 18:45:16
You need to select all the checkboxes, loop over them, and attach the event.您需要选择所有复选框，遍历它们并附加事件。
function cbClicked (event) { // reference the checkbox var cb = event.target // find it was checked var isChecked = cb.checked cb.closest("li") // find the parent li .classList.toggle("done", isChecked) // toggle the class } // Select all the checkboxes var checkboxes = document.querySelectorAll('ul input[type="checkbox"]') // loop over all the checkboxes checkboxes.forEach( function (cb) { // attach the event listener to each one cb.addEventListener("change", cbClicked) })
.done { text-decoration: line-through; }
<ul> <li> <input type="checkbox"> List Item 1 </li> <li> <input type="checkbox"> List Item 2 </li> <li> <input type="checkbox"> List Item 3 </li> </ul>
If you want to use jQuery it is similar, jQuery just does the looping for you如果你想使用 jQuery 它是类似的，jQuery 只是为你做循环
function cbClicked (event) { // reference the checkbox var cb = this var isChecked = this.checked $(cb).closest("li") // find the parent li .toggleClass("done", isChecked) // toggle the class } // Select all the checkboxes var checkboxes = $('ul input[type="checkbox"]').on("change", cbClicked)
.done { text-decoration: line-through; }
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <ul> <li> <input type="checkbox"> List Item 1 </li> <li> <input type="checkbox"> List Item 2 </li> <li> <input type="checkbox"> List Item 3 </li> </ul>
And it can be done with Just CSS它可以用 Just CSS 来完成
input:checked + label { text-decoration: line-through; }
<ul> <li> <input type="checkbox" id="cb1"> <label for="cb1">List Item 1</label> </li> <li> <input type="checkbox" id="c2"> <label for="cb2">List Item 2</label> </li> <li> <input type="checkbox" id="cb3"> <label for="cb3">List Item 3</label> </li> </ul>
解决方案2
0 2020-02-19 18:44:41
If you would rather apply the class 'completed' (and for that the style) when the check box is checked, I would recommend doing this, with jQuery:如果您更愿意在选中复选框时应用“已完成”类（以及样式），我建议使用 jQuery 执行此操作：
$(".strikeCheckbox").change(function() {
if(this.checked) {
$(this).parent().addClass("completed")
} else {
$(this).parent().removeClass("completed")
}
});
You can change the parent function for a specific prev(...) if you want.如果需要，您可以更改特定prev(...)的父函数。
解决方案3
0 2020-02-19 19:05:13
Add an Id to the UL and then use the below javascript向 UL 添加一个 Id，然后使用下面的 javascript
document.getElementById('ele').addEventListener('click',function(e){
event.target.parentElement.classList.toggle('completed');
});
document.querySelector always returns the first element that matches the given selector document.querySelector总是返回匹配给定选择器的第一个元素
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.