querySelector()的多个条件- JavaScript

Question

我不确定这是否是我需要的，但我认为这是必要的。也许我需要在这行中添加另一个条件

const div = document.querySelector(`#result_${i}`);

我有一个简单的。js文件与对象数组。现在每个物体都有问题和答案。我想把它扩展成& text"我会告诉你一些结果的细节等。

//For Text
const text = document.createElement("div");
text.id = "text_" + i;
text.style.display = "none";
text.classList.add("pokus");
text.innerHTML = ex.text;
card.appendChild(text);

逻辑与答案相同。我可以在DOM中看到它，但它没有显示给用户。我想原因是querySelector缺少条件?如果是的。我怎么能再加一个呢?我试过(`#result_${i}, #text_$(i)`)或(`#result_${i}`, `#text_${i}`);

整个代码。

import("./Objects/" + selectedPage + ".js")
.then((array) => {
const { examples } = array;
console.log(array);
function toggle(i) {
const div = document.querySelector(`#result_${i}`);
if (div.style.display !== "none") {
div.style.display = "none";
} else {
div.style.display = "block";
}
}
const container = document.querySelector("#examples-container");
examples.forEach((ex, i) => {
const card = document.createElement("div");
card.classList.add("card");
const example = document.createElement("div");
example.classList.add("example");
example.innerHTML = ex.question;
card.appendChild(example);
//For Button
const button = document.createElement("button");
button.classList.add("toggle");
button.innerHTML = "výsledek";
button.addEventListener("click", () => toggle(i));
card.appendChild(button);

//For answer
const result = document.createElement("div");
result.id = "result_" + i;
result.style.display = "none";
result.classList.add("result");
result.innerHTML = ex.answer;
card.appendChild(result);
//For Text
const text = document.createElement("div");
text.id = "text_" + i;
text.style.display = "none";
text.classList.add("pokus");
text.innerHTML = ex.text;
card.appendChild(text);
// Add the card to the container
container.appendChild(card);
});
})
.catch((err) => {
console.log(err);
});

Answer 1

我不是100%肯定我理解你的问题，但现在你正在使用QuerySelector，它只会返回第一个元素。如果你想选择多个元素，使用QuerySelectorAll/getElementByClassName，然后循环遍历它们返回的列表。

Answer 2

使用querySelectorAll

当您想要针对多个节点(这里的结果，文本)时，您需要使用querySelectorAll而不是querySelector

function toggle(i) {
const divs = document.querySelectorAll(`#result_${i}`,`#text_${i}`);
for (let div of divs) {
if (div.style.display !== "none") {
div.style.display = "none";
} else {
div.style.display = "block";
}
}
}