目前,我的代码允许用户 Select 任意多个选项.
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>
我已try 使用以下代码段,但我需要另一段代码来配合它...我错过了什么?
var SelectCount=0;
if (SelectCount < 3) {
SelectCount+=1;
}