這段代碼的作用是將打開的詳細資訊的最大值設定為 1 我想要的是將其設定為 3 我還沒有找到答案
const details = document.querySelectorAll("details");
details.forEach((targetDetail) => {
targetDetail.addEventListener("click", () => {
details.forEach((detail) => {
if (detail !== targetDetail) {
detail.removeAttribute("open");
}
});
});
}); <details>
<summary>test0</summary>
0
</details>
<details>
<summary>test1</summary>
1
</details>
<details>
<summary>test2</summary>
2
</details>
<details>
<summary>test3</summary>
3
</details>uj5u.com熱心網友回復：
一個簡單的解決方案是使用陣列跟蹤 nodeList 索引。我為你做了一個叫做 openDetails 的。然后當你打開一個細節時，它會被添加到陣列中。當你關閉它時，它會被洗掉。當您有 3 個專案時，您可以檢查串列的第一項，關閉相應的詳細資訊，然后將其從串列中洗掉。
let openDetails = [];
const details = document.querySelectorAll("details");
details.forEach((targetDetail, index) => {
targetDetail.addEventListener("click", (event) => {
const detailIsOpen = openDetails.includes(index);
if (detailIsOpen) {
openDetails = openDetails.filter((item) => item !== index);
} else {
if (openDetails.length > 2) {
const indexToClose = openDetails[0];
openDetails = openDetails.filter((item, i) => i !== 0);
details[indexToClose].removeAttribute("open");
}
openDetails.push(index);
}
});
});<details>
<summary>test0</summary>
0
</details>
<details>
<summary>test1</summary>
1
</details>
<details>
<summary>test2</summary>
2
</details>
<details>
<summary>test3</summary>
3
</details>uj5u.com熱心網友回復：
取而代之的是，
const details = document.querySelectorAll("details");
details.forEach((targetDetail) => {
targetDetail.addEventListener("click", () => {
details.forEach((detail) => {
if (detail !== targetDetail) {
detail.removeAttribute("open");
}
});
});
});
試試這個，可能對你有用??
const details = document.querySelectorAll("details");
details.forEach((targetDetail) => {
targetDetail.addEventListener("click", () => {
details.forEach((detail) => {
if (detail !== targetDetail) {
details.forEach(element => {
element.removeAttribute("open");
});
}
});
});
});
轉載請註明出處，本文鏈接：https://www.uj5u.com/net/353266.html
標籤：javascript html
下一篇：如何在html中添加多個影像？