如何减少多个按钮，用于多个相同的功能

我为我的学生做一个小应用程序。在页面上将是数学的例子来解决，并在例子下总是按钮，点击后显示你的结果，如果你是正确的或不。这是第一行要解决的第一个示例代码。我不打算只有2个例子，但大约有10-20个。所以我想问你有没有办法减少重复，让它更聪明，更利落，更干净。我使用纯HTML/CSS/JS。我不知道是否有可能，但我想避免在1页上有多个硬编码按钮和多个示例。

<div class="card">
<div class="example">
$${{ - b pm sqrt {{b^2} - 4ac} } over {2a}}$$
</div>
<button type="button" class="toggle" onClick="toggle()">
Toggle
</button>
<div id="result" class="num-1">this is result</div>
</div>
<!--NEW EXAMPLE -->
<div class="card">
<div class="example">
$${{ - b pm sqrt {{b^2} - 8ac} } over {2a}}$$
</div>
<button type="button" class="toggle" onClick="toggle()">
Toggle
</button>
<div id="result" class="num-2">this is result</div>
</div>

<script>
function toggle() {
let x = document.getElementById("result");
if (x.style.display === "none") {
x.style.display = "block";
} else {
x.style.display = "none";
}
}
</script>

我不知道会发生什么。在React中，我会使用。map函数，而在and中，我会只填写不同的示例。有没有可能有"类似的"东西?只在HTML/JS ?

如果按照dudung的建议只使用js会更简洁。但你还可以做别的事情，这个答案和Dhana D的类似，但它有你想要的切换功能。您可以简单地创建对象数组来存储问题，答案和切换状态，并迭代它们并创建"html字符串"。并使用innerHTML属性追加到html中硬编码的容器。

切换功能:可以看到，我们使用index为结果标签创建了唯一的id我们在调用toggle函数时也传递了相同的索引，toggle函数使用index参数;形成结果标签的id，并改变结果标签的显示属性。

const examples = [
{
que: "Question - 1",
show: false,
ans: "this is the result 1",
},
{
que: "Question - 2",
show: false,
ans: "this is the result 2",
},
{
que: "Question 3",
show: false,
ans: "this is the result 3",
}
]
const container = document.querySelector("#examples-container")
examples.forEach((ex, i) => {
const example = 
`<div class="card">
<div class="example">
${ex.que}
</div>
<button type="button" class="toggle" onclick="toggle(${i})">
Toggle
</button>
<div id="result_${i}" style="display:${ex.show? 'block': 'none'}" class="result">${ex.ans}</div>
</div>
</div>`
container.innerHTML += example
})
function toggle(i) {
const result = document.querySelector("#result_"+i)
result.style.display = examples[i].show? "none": "block"
examples[i].show = !examples[i].show
}

<div id="examples-container"></div>

在纯JavaScript中，您可以创建一个容器并利用innerHTML。例如:

var cont = document.querySelector('.container');
cont.innerHTML = "";
arr = [4, 8, 16, 32, 64];
arr.forEach(e => {
cont.innerHTML += `<div class="card">
<div class="example">
$$ - b pm sqrt {{b^2} - ${e}ac} } over 2a$$
</div>
<button type="button" class="toggle" onClick="toggle()">
Toggle
</button>
<div id="result" class="num-2">this is result</div>
</div>`
});

.card {
border: 1px solid #000;
padding: 10px 20px;
}

<body>
<div class="container"></div>
</body>

如果你想在HTML上硬编码的现有元素中间添加元素该怎么办?你可以用insertAdjacentHTML。参考:https://www.delftstack.com/howto/javascript/javascript-append-html/

相关内容

最新更新

热门标签：