如何在javascript中隐藏多个元素？

Question

<!DOCTYPE html> 
<html> 

<head> 
   <title> 
       Hide or show HTML elements using 
       visibility property in JavaScript 
   </title> 

   <style> 
           .container { 
           height: 80px; 
           width: 250px; 
           border: 2px solid black; 
           background-color: green; 
           color: white; 
   </style> 
</head> 

<body> 
   <center> 
       <div class="container"> 
           <h1>Number of Child</h1> 
       </div> 

       <p class="container2"> 
           Click the buttons to show 
           or hide the green box 
       </p> 
 <input type="radio" id="female" name="gender" value="female"  onclick="showElement()"
        checked>
           <label for="female">Female</label>
        <label for="male">Male</label>
         <input type="radio" id="male" name="gender" value="male" onclick="hideElement()">  

   </center> 

   <script type="text/javascript"> 
       function showElement() { 
           element = document.querySelector(".container"); 
           element = document.querySelector(".container2"); 

           element.style.visibility = 'visible'; 
       } 

       function hideElement() { 
           element = document.querySelector(".container"); 
           element = document.querySelector(".container2"); 

           element.style.visibility = 'hidden'; 
       } 
   </script> 
</body> 

</html>

好的，这是简单的代码，我想定位 2 个元素，它们是：“.container”和“.container2”

但是方法document.querySelector只选择一个，我该如何解决这个问题？

代码链接： https : //jsfiddle.net/7cgmq0tx/

Answer 1

第二个querySelector覆盖第一个，您应该使用两个变量：

   <script type="text/javascript"> 
       function showElement() { 
           element1 = document.querySelector(".container"); 
           element2 = document.querySelector(".container2"); 

           element1.style.visibility = 'visible'; 
           element2.style.visibility = 'visible'; 
       } 

       function hideElement() { 
           element1 = document.querySelector(".container"); 
           element2 = document.querySelector(".container2"); 

           element1.style.visibility = 'hidden'; 
           element2.style.visibility = 'visible'; 
       } 
   </script>

Answer 2

因为您试图在同一块中使元素等于两次，所以当代码运行时，javascript 会本能地使指定的最后一个为真。 这就是为什么当您单击按钮时它只影响一个元素。 试试这个：

function showElement() { 
           element = document.querySelector(".container"); 
           element2 = document.querySelector(".container2"); 

           element.style.visibility = 'visible';
           element2.style.visibility = 'visible';
       } 

       function hideElement() { 
           element = document.querySelector(".container"); 
           element2 = document.querySelector(".container2"); 

           element.style.visibility = 'hidden';
           element.style.visibility = 'hidden'; 
       }

如何在javascript中隐藏多个元素？

问题描述

2 个解决方案

解决方案1
1 已采纳 2020-01-25 23:57:14

解决方案2
0 2020-01-26 00:16:35

如何在javascript中隐藏多个元素？

问题描述

2 个解决方案

解决方案1 1 已采纳 2020-01-25 23:57:14

解决方案2 0 2020-01-26 00:16:35

解决方案1
1 已采纳 2020-01-25 23:57:14

解决方案2
0 2020-01-26 00:16:35