我编写了这段代码并得到了以下结果但是有一个问题，如果我们删除复选框然后单击按钮，结果将不会更新!请帮助我完成这个程序...谢谢:)
const inputs = document.querySelectorAll(".inputGroup input");
const icons = document.querySelectorAll(".icons i");
let btn = document.getElementById("btn");
btn.addEventListener("click", function (e) {
inputs.forEach(function (inputs) {
if (inputs.checked === true) {
icons.forEach(function(i){
if(inputs.dataset.id === i.getAttribute('class'))
{
i.style.display = 'block'
}
})
}
})
});
.icons i
{
display: none;
}<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.2.0/css/all.min.css"
integrity="sha512-xh6O/CkQoPOWDdYTDqeRdPCVd1SpvCA9XXcUnZS2FmJNp1coAFzvtCN9BmamE+4aHK8yyUHUSCcJHgXloTyT2A=="
crossorigin="anonymous" referrerpolicy="no-referrer" />
</head>
<body>
<div class="inputGroup">
<input data-id="fa fa-user" type="checkbox" id="user">
<label for="user">user</label>
<input data-id="fa fa-tree" type="checkbox" id="tree">
<label for="tree">tree</label>
<input data-id="fa fa-lock" type="checkbox" id="lock">
<label for="fa fa-lock">lock</label>
<button id="btn">Button</button>
</div>
<div class="icons">
<i class="fa fa-user"></i>
<i class="fa fa-tree"></i>
<i class="fa fa-lock"></i>
</div>
<script src="./app.js"></script>
</body>
</html>最佳答案
诀窍是，如果未选中该复选框，则“取消显示”图标。 我更改了代码的一些行以使其更具可读性(使用 find 数组方法):
const inputs = document.querySelectorAll(".inputGroup input");
// make icons an array to be able to use the .find() method on it
const icons = Array.from(document.querySelectorAll(".icons i"));
let btn = document.getElementById("btn");
btn.addEventListener("click", function(e) {
inputs.forEach(function(input) {
const inputId = input.dataset.id;
// find the associated icon to the input
const icon = icons.find(tmpicon => inputId === tmpicon.className);
// display the icon if the input is checked
if (input.checked) {
icon.style.display = "block";
}
// don't display it if the input isn't checked
else {
icon.style.display = "none";
}
});
});.icons i {
display: none;
}<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.2.0/css/all.min.css" integrity="sha512-xh6O/CkQoPOWDdYTDqeRdPCVd1SpvCA9XXcUnZS2FmJNp1coAFzvtCN9BmamE+4aHK8yyUHUSCcJHgXloTyT2A==" crossorigin="anonymous" referrerpolicy="no-referrer"
/>
</head>
<body>
<div class="inputGroup">
<input data-id="fa fa-user" type="checkbox" id="user">
<label for="user">user</label>
<input data-id="fa fa-tree" type="checkbox" id="tree">
<label for="tree">tree</label>
<input data-id="fa fa-lock" type="checkbox" id="lock">
<label for="fa fa-lock">lock</label>
<button id="btn">Button</button>
</div>
<div class="icons">
<i class="fa fa-user"></i>
<i class="fa fa-tree"></i>
<i class="fa fa-lock"></i>
</div>
<script src="./app.js"></script>
</body>
</html>关于javascript - 我们的一段 JavaScript 代码有问题，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/74171888/