如何使用 vanilla js 显示和隐藏 div 元素

Question

下面是我尝试使用纯 js 显示和隐藏 div 元素的代码。 因为当我点击按钮时，它需要三下点击来隐藏 div 元素，然后它运行顺利。 我试图找到如何在第一次点击时显示元素。

 var count = 0; function showMee() { var buttonHome = document.querySelector("#showMe"); count += 1; buttonHome.addEventListener("click", function() { if (count == 1) { document.querySelector('#linkMeOne').style.display = 'none'; document.querySelector('#linkMeTwo').style.display = 'none'; } else if (count == 2) { document.querySelector('#linkMeOne').style.display = 'block'; document.querySelector('#linkMeTwo').style.display = 'block'; count = 0; } }); }

 #linkMeOne { display: block; } #linkMeTwo { display: block; }

 <div id="linkMeOne"> Hiding me As first time.... </div> <div id="linkMeTwo"> Hiding me as well as... </div> <input type="button" value="Check Me" id="showMe" onclick="showMee()" />

Answer 1

只需切换隐藏。

如果您希望它们开始隐藏，请将 hidden 属性添加到 div

 const div1 = document.getElementById("linkMeOne"); const div2 = document.getElementById("linkMeTwo") document.querySelector("#showMe").addEventListener("click",function() { div1.hidden =.div1;hidden. div2.hidden =;div2.hidden; })

 <div id="linkMeOne"> Hiding me As first time.... </div> <div id="linkMeTwo"> Hiding me as well as... </div> <input type="button" value="Check Me" id="showMe" />

Answer 2

发生这种情况是因为您在另一个使事件重复的click事件中添加了click事件侦听器，您需要在外部添加另一个click事件侦听器。

 var count = 0; var buttonHome = document.querySelector("#showMe"); function showMee() { count += 1; } buttonHome.addEventListener("click", function() { if (count == 1) { document.querySelector('#linkMeOne').style.display = 'none'; document.querySelector('#linkMeTwo').style.display = 'none'; } else if (count == 2) { document.querySelector('#linkMeOne').style.display = 'block'; document.querySelector('#linkMeTwo').style.display = 'block'; count = 0; } });

 #linkMeOne { display: block; } #linkMeTwo { display: block; }

 <div id="linkMeOne"> Hiding me As first time.... </div> <div id="linkMeTwo"> Hiding me as well as... </div> <input type="button" value="Check Me" id="showMe" onclick="showMee()" />

另外，我建议您使用class来隐藏元素并切换它，它会更干净。

 const buttonHome = document.getElementById('showMe'); const linkOne = document.getElementById('linkMeOne'); const linkTwo = document.getElementById('linkMeTwo'); buttonHome.addEventListener("click", function() { linkOne.classList.toggle('hide'); linkTwo.classList.toggle('hide'); });

 #linkMeOne { display: block; } #linkMeTwo { display: block; }.hide { display: none;important; }

 <div id="linkMeOne"> Hiding me As first time.... </div> <div id="linkMeTwo"> Hiding me as well as... </div> <input type="button" value="Check Me" id="showMe" />

Answer 3

只需删除addEventlistener ，代码就会开始工作。

 var count = 0; function showMee() { var buttonHome = document.querySelector("#showMe"); count += 1; //buttonHome.addEventListener("click", function() { if (count == 1) { document.querySelector('#linkMeOne').style.display = 'none'; document.querySelector('#linkMeTwo').style.display = 'none'; } else if (count == 2) { document.querySelector('#linkMeOne').style.display = 'block'; document.querySelector('#linkMeTwo').style.display = 'block'; count = 0; } //}); }

 #linkMeOne { display: block; } #linkMeTwo { display: block; }

 <div id="linkMeOne"> Hiding me As first time.... </div> <div id="linkMeTwo"> Hiding me as well as... </div> <input type="button" value="Check Me" id="showMe" onclick="showMee()" />

不要使用变量，而是使用 class 将display设置为none 。

 function showMee() { document.querySelector('#linkMeOne').classList.toggle('hidden'); document.querySelector('#linkMeTwo').classList.toggle('hidden') }

 #linkMeOne { display: block; } #linkMeTwo { display: block; }.hidden { display: none;important; }

 <div id="linkMeOne"> Hiding me As first time.... </div> <div id="linkMeTwo"> Hiding me as well as... </div> <input type="button" value="Check Me" id="showMe" onclick="showMee()" />

Answer 4

虽然有很多正确答案，但都缺乏简单性。 最简单的解决方案是向按钮添加一个eventListener并将 class 切换到具有特定 class 的所有元素。 这样你就不必列出每一个元素：

 document.querySelector('#showMe').addEventListener('click', function() { document.querySelectorAll('.linkMe').forEach(el => el.classList.toggle('d-block') ); })

 .linkMe { display: none; }.d-block { display: block; }

 <div class="linkMe"> Hiding me As first time.... </div> <div class="linkMe"> Hiding me as well as... </div> <input type="button" value="Check Me" id="showMe" />

Answer 5

您可以使用数据属性和一些 CSS 进行切换。 这是一个详细的版本：

 document.querySelector("#showMe").addEventListener("click", (event) => { const t = event.target; const showem = t.dataset.show; document.querySelectorAll('.can-toggle').forEach((element) => { element.dataset.show = showem; }); t.dataset.show = showem == "show"? "hide": "show"; });

 .can-toggle[data-show="hide"] { display: none; }

 <div class="can-toggle"> Hiding me As first time.... </div> <div class="can-toggle"> Hiding me as well as... </div> <input type="button" value="Check Me" id="showMe" data-show="hide" />

或者甚至独立地使用初始 state：

 document.querySelector("#showMe").addEventListener("click", (event) => { document.querySelectorAll('.can-toggle').forEach((element) => { element.dataset.show = element.dataset.show == "hide"? "show": "hide"; }); });

 .can-toggle[data-show="hide"] { display: none; }

 <div class="can-toggle" data-show="hide"> Hiding me As first time.... </div> <div class="can-toggle"> Hiding me as well as... </div> <div class="can-toggle" data-show="Ishow"> What am I? </div> <input type="button" value="Check Me" id="showMe" data-show="hide" />