目前，我的代码允许用户选择任意数量的选项。 我需要将其限制为仅 3 个选项。 如果用户改变主意，他们需要能够取消选择一个选项，但最多只能选择 3 个选项。
var container = document.getElementById('my_dataviz');
var array = ["One", "Two", "Three", "Four", "Five", "Six",
"Seven", "Eight", "Nine", "Ten"
]
let identifier = 0;
array.forEach(element => {
var button = document.createElement("button");
button.className = "btn";
button.id = element;
button.value = element;
button.type = "button";
var text = document.createTextNode(element);
button.appendChild(text);
container.appendChild(button);
});
let btn = document.getElementsByClassName("btn");
for (var i = 0; i < btn.length; i++) {
(function(index) {
btn[index].addEventListener("click", function() {
console.log("Clicked Button: " + index);
let isPresent = false;
this.classList.forEach(function(e, i) {
if (e == "button-focus") {
isPresent = true;
} else {
isPresent = false;
}
});
if (isPresent) {
this.classList.remove("button-focus");
} else {
this.classList.add("button-focus");
}
});
})(i);
}:root {
--primary_orange: #fea501
}
;
.my_dataviz {
width: auto;
height: 500px;
margin-top: 15px;
margin-bottom: 12px;
display: flex;
flex-wrap: wrap;
align-content: center;
justify-content: space-around;
}
.my_dataviz button {
font-size: 16px;
display: flex;
justify-content: center;
width: 120px;
background-color: Transparent;
-webkit-tap-highlight-color: transparent;
background-repeat: no-repeat;
border: none;
letter-spacing: 1.6px;
margin: 10px;
border: 1px solid transparent;
}
.my_dataviz button:hover {
box-sizing: border-box;
background-color: var(--primary_orange);
font-weight: bold;
border: 1px solid #000;
border-radius: 10px;
}
.btn.button-focus {
background-color: var(--primary_orange);
color: var(--dark);
font-weight: bold;
border: 1px solid #000;
border-radius: 10px;
}
.modal-footer .modal-btn {
width: 80px;
height: 25px;
border-radius: 5px;
align-items: center;
Margin: 30px;
}<div class="modal-style">
<div class="my_dataviz" id="my_dataviz">
</div>
<div class="modal-footer">
<input class="modal-btn" type="button" value="Select" />
</div>
</div>我已尝试使用以下代码片段，但我需要另一个代码片段来配合它...我错过了什么？
var SelectCount=0;
if (SelectCount < 3) {
SelectCount+=1;
}最佳答案
试试这个，它主要检查所选的计数并使用 document.querySelectorAll() 来启用或禁用所有按钮。
<!DOCTYPE html>
<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>
<style>
:root {
--primary_orange: #fea501
}
;
.my_dataviz {
width: auto;
height: 500px;
margin-top: 15px;
margin-bottom: 12px;
display: flex;
flex-wrap: wrap;
align-content: center;
justify-content: space-around;
}
.my_dataviz button {
font-size: 16px;
display: flex;
justify-content: center;
width: 120px;
background-color: Transparent;
-webkit-tap-highlight-color: transparent;
background-repeat: no-repeat;
border: none;
letter-spacing: 1.6px;
margin: 10px;
border: 1px solid transparent;
}
.my_dataviz button:hover {
box-sizing: border-box;
background-color: var(--primary_orange);
font-weight: bold;
border: 1px solid #000;
border-radius: 10px;
}
.btn.button-focus {
background-color: var(--primary_orange);
color: var(--dark);
font-weight: bold;
border: 1px solid #000;
border-radius: 10px;
}
.modal-footer .modal-btn {
width: 80px;
height: 25px;
border-radius: 5px;
align-items: center;
Margin: 30px;
}
</style>
</head>
<body>
<div class="modal-style">
<div class="my_dataviz" id="my_dataviz">
</div>
<div class="modal-footer">
<input class="modal-btn" type="button" value="Select" />
</div>
</div>
<script>
const container = document.getElementById('my_dataviz');
const array = ["One", "Two", "Three", "Four", "Five", "Six", "Seven", "Eight", "Nine", "Ten"]
let identifier = 0;
let SelectCount = 0;
array.forEach(element => {
const button = document.createElement("button");
button.className = "btn";
button.id = element;
button.value = element;
button.type = "button";
const text = document.createTextNode(element);
button.appendChild(text);
container.appendChild(button);
});
let btn = document.getElementsByClassName("btn");
for (let i = 0; i < btn.length; i++) {
(function (index) {
btn[index].addEventListener("click", function () {
console.log("Clicked Button: " + index);
let isPresent = false;
this.classList.forEach(function (e, i) {
if (e == "button-focus") {
isPresent = true;
} else {
isPresent = false;
}
});
if (isPresent) {
this.classList.remove("button-focus");
SelectCount -= 1;
document.querySelectorAll('.btn').forEach(item => {
if (!item.classList.value.includes('button-focus')) item.disabled = false
})
} else {
this.classList.add("button-focus");
SelectCount += 1;
if (SelectCount > 2) {
document.querySelectorAll('.btn').forEach(item => {
if (!item.classList.value.includes('button-focus')) item.disabled = true
})
}
}
})
})(i)
}
</script>
</body>
</html>关于javascript - 限制可以选择的焦点元素的数量，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/72595488/