我有這個 JS 函式，它最初應該隱藏一個類名為“tw”的函式，當單擊一個按鈕時，它應該使其可見。但是，每當我單擊按鈕時，它只會更改一個 div 的可見性。我有 4 個。我該如何解決這個問題？
function myFunction(){
var elms = document.getElementsByClassName("tw");
Array.from(elms).forEach((x) => {
if (x.style.display === "block") {
x.style.display = "none";
} else {
x.style.display = "block";
}
})
}
https://jsfiddle.net/qm8bxryh/307/ 這是小提琴
uj5u.com熱心網友回復：
我將您的代碼復制到一個非常簡單的頁面的背景關系中（見下文），它似乎可以作業......我可能錯過了一些東西，但問題可能出在您專案的其他地方嗎？也許在瀏覽器控制臺中逐個研究它可能會有所幫助。
<!DOCTYPE html>
<html>
<script>
function myFunction(){
var elms = document.getElementsByClassName("tw");
Array.from(elms).forEach((x) => {
if (x.style.display === "block") {
x.style.display = "none";
} else {
x.style.display = "block";
}
})
}
</script>
<body>
<button onclick="myFunction()">Click me</button>
<div class="tw">1</div>
<div class="tw" style="display: block;">2</div>
<div class="tw">3</div>
<div class="tw" style="display: block;">4</div>
</body>
</html>
uj5u.com熱心網友回復：
沒有將顯示值設定為默認值，因此當您嘗試在從未在 css 或樣式中使用顯示的元素上訪問它時，它會回傳 undefined or nothing
這就是為什么如果沒有元素有任何顯示，在第一個按鈕上單擊什么都不會發生，然后由于您的功能，所有這些都通過 else display: block 并在第二個按鈕上單擊 all 切換
我喜歡做的是創建一個像 displayNone 這樣的類
所以在CSS中：
.displayNone{
display:none;
}
然后每當你想讓一個元素不可見時給它這個類，然后當你點擊按鈕時，只需洗掉該類，所有元素都變得可見
所以在你的函式中是這樣的：
function myFunction() {
var elms = document.getElementsByClassName("tw");
console.log(elms);
console.log(Array.from(elms));
Array.from(elms).forEach((x) => x.classList.remove('displayNone')); // just remove the class
}
或者，您也可以使用它，classList.toggle('displayNone)因此它在無顯示和初始顯示之間切換
uj5u.com熱心網友回復：
我會在 CSS 領域保持樣式并在 JS 中切換一個類以顯示元素。此外，當您使用querySelectorAll()它回傳一個 nodeList 時，它已經是陣列形式了。
在 CSS 中添加一個 CSS 類：
.display {
display: block;
}
那么你的 JS 函式可能會更加精簡toggle()
let elms = document.querySelectorAll(".tw");
function myFunction() {
elms.forEach(el => el.classList.toggle('display'))
}
JSFiddle
轉載請註明出處，本文鏈接：https://www.uj5u.com/ruanti/414294.html
標籤：
上一篇：將四個輸入設定為看起來像一個