為什么我的JS function 只操作一個<div>分配給 class 而不是全部？</div><div id="text_translate"><p> 我有這個 JS function 應該最初隱藏一個具有 class 名稱“tw”的，當點擊一個按鈕時它應該使它可見。但是，每當我單擊按鈕時，它只會更改一個 div 的可見性。我有 4 個。我該如何解決這個問題？</p><pre> 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"; } }) }</pre><p> <a href="https://jsfiddle.net/qm8bxryh/307/" rel="nofollow noreferrer">https://jsfiddle.net/qm8bxryh/307/</a>這是小提琴</p></div>

Question

我有這個 JS function 應該最初隱藏一個具有 class 名稱“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/這是小提琴

Answer 1

我將您的代碼復制到一個非常簡單的頁面的上下文中（見下文），它似乎可以工作......我可能錯過了一些東西，但問題可能出在您項目的其他地方嗎？ 也許在瀏覽器控制台中逐個研究它可能會有所幫助。

<!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>

Answer 2

沒有將顯示值設置為默認值，因此當您嘗試在從未在 css 中使用顯示或樣式的元素上訪問它時，它會返回undefined or nothing

這就是為什么如果沒有元素有任何顯示，在第一個按鈕上單擊沒有任何反應，然后由於您的 function 所有這些都通過了 else 顯示：塊，然后在第二個按鈕上單擊全部切換

我喜歡做的是創建一個 class 像 displayNone

所以在 css 中：

.displayNone{
     display:none;
}

然后每當你想讓一個元素不可見時給它這個 class 然后當你點擊按鈕時只需刪除 class 並且所有元素都變得可見

所以在你的 function 中是這樣的：

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)以便它在無顯示和初始顯示之間切換

Answer 3

我會在 CSS realm 中保持樣式，並在 JS 中切換 class 以顯示元素。 此外，當您使用querySelectorAll()返回 nodeList 時，它已經是數組形式。

將 css class 添加到 CSS：

.display {
  display: block;
}

那么你的 JS function 可以通過toggle()更加精簡

let elms = document.querySelectorAll(".tw");
function myFunction() {
  elms.forEach(el =>  el.classList.toggle('display'))
}

JSFiddle

問題描述

3 個解決方案

解決方案1
1 已采納 2022-01-17 18:29:49

解決方案2
0 2022-01-17 18:37:33

解決方案3
0 2022-01-17 18:53:52

問題描述

3 個解決方案

解決方案1 1 已采納 2022-01-17 18:29:49

解決方案2 0 2022-01-17 18:37:33

解決方案3 0 2022-01-17 18:53:52

解決方案1
1 已采納 2022-01-17 18:29:49

解決方案2
0 2022-01-17 18:37:33

解決方案3
0 2022-01-17 18:53:52