如何切换多个 div 的可见性？

Question

我正在尝试切换六个包含元音的 div 的可见性。我不明白为什么我不能使用下面的代码 select 多个元素：

<div class="grid-container">
<div class="grid-item item-1 vowel">A</div>
<div class="grid-item item-2 consonant">B</div>
<div class="grid-item item-3 consonant">C</div>
<div class="grid-item item-4 consonant">D</div>
 <div class="grid-item item-5 vowel">E</div>
<div class="grid-item item-6 consonant">F</div>
<div class="grid-item item-7 consonant">G</div>
<div class="grid-item item-8 consonant">H</div>
 <div class="grid-item item-9 vowel">I</div>
<div class="grid-item item-10 consonant">J</div>
<div class="grid-item item-11 consonant">K</div>
<div class="grid-item item-12 consonant">L</div>
<div class="grid-item item-13 consonant">M</div>
<div class="grid-item item-14 consonant">N</div>
<div class="grid-item item-15 vowel">O</div>
<div class="grid-item item-16 consonant">P</div>
 <div class="grid-item item-17 consonant">Q</div>
<div class="grid-item item-18 consonant">R</div>
<div class="grid-item item-19 consonant">S</div>
<div class="grid-item item-20 consonant">T</div>
 <div class="grid-item item-21 vowel">U</div>
<div class="grid-item item-22 consonant">V</div>
<div class="grid-item item-23 consonant">W</div>
<div class="grid-item item-24 consonant">X</div>
<div class="grid-item item-25 vowel">Y</div>
<div class="grid-item item-26 consonant">Z</div>

`

    //toggle vowels
    
    const toggleVowelsButton = document.getElementById('button9');
    toggleVowelsButton.addEventListener('click', hideVowels);
    
    function hideVowels() {
     let vowels = document.getElementsByClassName('vowel');
     if (vowels.style.visibility === "hidden") {
      vowels.style.visibility = "visible";
      }else {
        vowels.style.visibility ="hidden";
      }
    }

任何关于如何 select 和操作多个元素的建议将不胜感激。

Answer 1

document.getElementsByClassName() returns 一个 HTMLCollection，你必须遍历它。这是一个可行的解决方案（另请参阅 pen）：

function hideVowels() {
  let vowels = document.getElementsByClassName("vowel");
  for (let i = 0; i < vowels.length; i = i + 1) {
    let vowel = vowels[i];
    if (vowel.style.visibility === "hidden") {
      vowel.style.visibility = "visible";
    } else {
      vowel.style.visibility = "hidden";
    }
  }
}

hideVowels();

我还建议查看。

当您对 Web 基础知识更加熟悉时，我强烈建议您使用前端框架来处理此类内容。我最喜欢的是 VueJS.

如何切换多个 div 的可见性？

How can you toggle the visibility of multiple divs?

toggle