我有一个按钮菜单，正在尝试记录选择了哪些按钮。可以同时选择多个按钮。目前，我只能将单个按钮选择记录到单个数组中，但我正在尝试循环选择哪些按钮以将所有变量放在一个数组中。
我希望最终得到这样的数组：如果选择了这些按钮，["A"、"C"、"D"]。我希望在用户点击完成按钮时记录数组。
有人对我做错了什么有建议吗？提前非常感谢！
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<style media="screen">
.buttons {
width: 150px;
height: 50px;
border: solid 2px black;
text-align: center;
color: black;
cursor: pointer;
background-color: white;
margin: 2px;
}
#buttonGallery {
margin: 10px;
padding: 10px;
border: solid 2px black;
width: 155px;
}
#done {
width: 150px;
height: 50px;
border: solid 2px black;
text-align: center;
color: black;
cursor: pointer;
background-color: white;
margin: 2px;
}
</style>
</head>
<body>
<div id="buttonGallery">
<div id="done">
<p>done</p>
</div>
</div>
<script type="text/javascript">
let $buttonGallery = $("#buttonGallery");
let myList = ["A", "B", "C", "D"];
let myColors = ["red", "green", "blue", "red"];
myList.map(function(letter, index) {
let $button = $("<div></div>")
.addClass("buttons")
.attr("id", "button_" + letter)
.html("<p>" + letter + "</p>")
.on("mouseenter", function() {
$(this).css("background", myColors[index]);
})
.on("mouseleave", function() {
if (!$(this).hasClass('selected')) {
$(this).css("background", "transparent");
}
})
.on("click", function() {
$(this).css("background", myColors[index]);
$(this).addClass('selected');
let clicked = [];
let syms = document.querySelectorAll('.selected');
console.log(syms);
for (let n = 0; n < syms.length; n++) {
clicked = [];
if (!clicked.includes(syms[n].textContent)) {
clicked.push(syms[n].textContent);
console.log(syms[n].textContent);
}
console.log('click', clicked);
};
})
$("#done").before($button);
});
$("#done").on("click", clearColor);
function clearColor() {
$(".buttons").css({
backgroundColor: 'transparent'
});
$(".buttons").removeClass('selected');
}
</script>
</body>
</script>
</html>您应该按照注释中的建议全局设置clicked，并且可以使用 spread 运算符对数组进行重复数据删除：
let $buttonGallery = $("#buttonGallery");
let myList = ["A", "B", "C", "D"];
let myColors = ["red", "green", "blue", "red"];
let clicked = [];
myList.map(function(letter, index) {
let $button = $("<div></div>")
.addClass("buttons")
.attr("id", "button_" + letter)
.html("<p>" + letter + "</p>")
.on("mouseenter", function() {
$(this).css("background", myColors[index]);
})
.on("mouseleave", function() {
if (!$(this).hasClass('selected')) {
$(this).css("background", "transparent");
}
})
.on("click", function() {
$(this).css("background", myColors[index]);
$(this).addClass('selected');
let syms = document.querySelectorAll('.selected');
let selected = [...syms].map(el => el.textContent)
console.log("selected", selected);
})
$("#done").before($button);
});
$("#done").on("click", clearColor);
function clearColor() {
$(".buttons").css({
backgroundColor: 'transparent'
});
$(".buttons").removeClass('selected');
}.buttons {
width: 150px;
height: 50px;
border: solid 2px black;
text-align: center;
color: black;
cursor: pointer;
background-color: white;
margin: 2px;
}
#buttonGallery {
margin: 10px;
padding: 10px;
border: solid 2px black;
width: 155px;
}
#done {
width: 150px;
height: 50px;
border: solid 2px black;
text-align: center;
color: black;
cursor: pointer;
background-color: white;
margin: 2px;
}<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="buttonGallery">
<div id="done">
<p>done</p>
</div>
</div>