我有这个让我们说我创建问题的测验制造商。它看起来像这样:
用户可以选择以 4 种不同方式显示此评分系统:
默认评分系统是 1 到 5 个数字。但是用户可以选择使用拨动开关以及星号而不是数字将其从 1 变为 10。我的问题是我不知道如何在打开开关时再添加 5 个数字,然后在关闭时再次删除它们,或者在打开另一个拨动开关时删除数字并添加星号。
我想我需要类似的东西:
depending on the current state:
if (1-10_switch.isChanged){
(addMore(stars || numbers) || remove )
}
else if (stars_switch.isChanged){
(changeIconTo(stars || numbers))
}
我有代码来检查开关是否打开和关闭:oneToTenButtonCheckbox.addEventListener("change", function () {
OneToTen = OneToTen ? false : true;
});
starsButtonCheckbox.addEventListener("change", function () {
isStars = isStars ? false : true;
});
这是我添加数字的代码: var numbersDiv = document.createElement("div");
numbersDiv.className = "row";
for (let i = 0; i < 5; i++) {
var num = document.createElement("div");
num.insertAdjacentText("beforeend", i + 1);
if (i == 0) num.className = "col-1 offset-1 mb-2";
else num.className = "col-1 mb-2";
numbersDiv.appendChild(num);
}
有谁知道我可以用什么方法来解决这个问题?或者也许有人已经做过并且知道该怎么做?谢谢。
最佳答案
我不会动态生成该 HTML。预先创建它,并使用 CSS 类隐藏最后 5 个元素。这些数字也可以在开始时使用 CSS 计数器生成。
有了这个设置,代码只需要切换 CSS 类:
const answer = document.querySelector("#answer");
document.querySelector("#oneToTenButtonCheckbox").addEventListener("change", () => {
answer.children[1].classList.toggle("hidden");
});
document.querySelector("#starsButtonCheckbox").addEventListener("change", () => {
answer.classList.toggle("stars");
});
body {
counter-reset: star-num;
}
#answer.stars > span > span::after {
content: "⭐";
}
#answer > span > span::after {
counter-increment: star-num;
content: counter(star-num);
}
#answer > span > span {
display: inline-block;
text-align: center;
width: 30px;
}
.hidden {
display: none
}
<label><input type=checkbox id="oneToTenButtonCheckbox">1 - 10</label><br>
<label><input type=checkbox id="starsButtonCheckbox">Stars</label><br>
<div id="answer">
<span><span></span><span></span><span></span><span></span><span></span></span><span class="hidden"><span></span><span></span><span></span><span></span><span></span></span>
</div>
关于javascript - 如何动态添加和删除元素 JavaScript,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/73163500/