隐藏
下的每个元素

huangapple
go评论105阅读模式
英文:

Hide every element under a div

问题

我正在寻找一种方法，可以在单击按钮时隐藏每个<p></p>并显示<h1></h1>，反之亦然（onclick="javascript hide <p> show <h1>），我可以使用唯一的id来实现，但无法为每个都分配相同的id。有没有其他方法可以做到这一点？最好不使用jquery。

  1. <!-- begin snippet: js hide: false console: true babel: false -->
  3. <!-- language: lang-html -->
  4. <div class="Title">
  5.   <div class="SubTitle">
  6.     <p>文本</p>
  7.     <h1>文本2</h1>
  8.   </div>
  9. </div>
  10. <div class="Title">
  11.   <div class="SubTitle">
  12.     <p>文本</p>
  13.     <h1>文本2</h1>
  14.   </div>
  15. </div>
  16. <div class="Title">
  17.   <div class="SubTitle">
  18.     <p>文本</p>
  19.     <h1>文本2</h1>
  20.   </div>
  21. </div>
  23. <!-- end snippet -->
英文:

I'm looking for a way I can hide each &lt;p&gt;&lt;/p&gt; and show &lt;h1&gt;&lt;/h1&gt; instead on click of a button (onclick=&quot;javascript hide &lt;p&gt; show &lt;h1&gt;), and vise versa. I could do it with unique id but I cannot assign the same id for each. Is there any way to do it? preferably without jquery.

<!-- begin snippet: js hide: false console: true babel: false -->

<!-- language: lang-html -->

  1. &lt;div class=&quot;Title&quot;&gt;
  2.   &lt;div class=&quot;SubTitle&quot;&gt;
  3.     &lt;p&gt;Text&lt;/p&gt;
  4.     &lt;h1&gt;Text2&lt;/h1&gt;
  5.   &lt;/div&gt;
  6. &lt;/div&gt;
  7. &lt;div class=&quot;Title&quot;&gt;
  8.   &lt;div class=&quot;SubTitle&quot;&gt;
  9.     &lt;p&gt;Text&lt;/p&gt;
  10.     &lt;h1&gt;Text2&lt;/h1&gt;
  11.   &lt;/div&gt;
  12. &lt;/div&gt;
  13. &lt;div class=&quot;Title&quot;&gt;
  14.   &lt;div class=&quot;SubTitle&quot;&gt;
  15.     &lt;p&gt;Text&lt;/p&gt;
  16.     &lt;h1&gt;Text2&lt;/h1&gt;
  17.   &lt;/div&gt;
  18. &lt;/div&gt;

<!-- end snippet -->

答案1

得分: 0

你可以使用 CSS 选择器 &gt; 来选择直接子元素，并在按钮点击时说，div 元素的直接子元素 p 都切换到隐藏类。你也可以更具体地选择 div &gt; div &gt; p 或 .SubTitle &gt; p。

  1. <!-- 开始代码片段：JavaScript 隐藏: false 控制台: true Babel: false -->
  2. <!-- 语言: lang-js -->
  3. document.getElementById("p").addEventListener("click", () => {
  4.   document.querySelectorAll("div > p")
  5.     .forEach(el => el.classList.toggle("hidden"));
  6. });
  7. document.getElementById("h1").addEventListener("click", () => {
  8.   document.querySelectorAll("div > h1")
  9.     .forEach(el => el.classList.toggle("hidden"));
  10. });
  12. <!-- 语言: lang-css -->
  13. .hidden {
  14.   display: none;
  15. }
  17. <!-- 语言: lang-html -->
  18. <button id="p">切换 p</button>
  19. <button id="h1">切换 h1</button>
  20. <div class="Title">
  21.   <div class="SubTitle">
  22.     <p>文本</p>
  23.     <h1>文本2</h1>
  24.   </div>
  25. </div>
  26. <div class="Title">
  27.   <div class="SubTitle">
  28.     <p>文本</p>
  29.     <h1>文本2</h1>
  30.   </div>
  31. </div>
  32. <div class="Title">
  33.   <div class="SubTitle">
  34.     <p>文本</p>
  35.     <h1>文本2</h1>
  36.   </div>
  37. </div>
  38. <!-- 结束代码片段 -->
英文:

You can use the css selector &gt; for direct child of, and say that the direct child p elements of div elements are all toggled the hidden class when the button is clicked. You could target more specifically with div &gt; div &gt; p or .SubTitle &gt; p as well.

<!-- begin snippet: js hide: false console: true babel: false -->

<!-- language: lang-js -->

  1. document.getElementById(&quot;p&quot;).addEventListener(&quot;click&quot;, () =&gt; {
  2.   document.querySelectorAll(&quot;div &gt; p&quot;)
  3.     .forEach(el =&gt; el.classList.toggle(&quot;hidden&quot;));
  4. });
  5. document.getElementById(&quot;h1&quot;).addEventListener(&quot;click&quot;, () =&gt; {
  6.   document.querySelectorAll(&quot;div &gt; h1&quot;)
  7.     .forEach(el =&gt; el.classList.toggle(&quot;hidden&quot;));
  8. });

<!-- language: lang-css -->

  1. .hidden {
  2.   display: none;
  3. }

<!-- language: lang-html -->

  1. &lt;button id=&quot;p&quot;&gt;toggle p&lt;/button&gt;
  2. &lt;button id=&quot;h1&quot;&gt;toggle h1&lt;/button&gt;
  3. &lt;div class=&quot;Title&quot;&gt;
  4.   &lt;div class=&quot;SubTitle&quot;&gt;
  5.     &lt;p&gt;Text&lt;/p&gt;
  6.     &lt;h1&gt;Text2&lt;/h1&gt;
  7.   &lt;/div&gt;
  8. &lt;/div&gt;
  9. &lt;div class=&quot;Title&quot;&gt;
  10.   &lt;div class=&quot;SubTitle&quot;&gt;
  11.     &lt;p&gt;Text&lt;/p&gt;
  12.     &lt;h1&gt;Text2&lt;/h1&gt;
  13.   &lt;/div&gt;
  14. &lt;/div&gt;
  15. &lt;div class=&quot;Title&quot;&gt;
  16.   &lt;div class=&quot;SubTitle&quot;&gt;
  17.     &lt;p&gt;Text&lt;/p&gt; 
  18.     &lt;h1&gt;Text2&lt;/h1&gt;
  19.   &lt;/div&gt;
  20. &lt;/div&gt;

<!-- end snippet -->

答案2

得分: 0

以下是翻译好的部分：

"Sure." -> "当然。"
"Here I add an event listener to a button." -> "在这里，我为按钮添加了一个事件监听器。"
"I hid each p first, since I assume you want to show the title when the page loads." -> "我首先隐藏了每个

，因为我假设您希望在页面加载时显示标题。"
"Alternatively hide the Ps onload using script when loading the page:" -> "或者，在页面加载时使用脚本隐藏

："
"allP.forEach(p => p.hidden = true);" -> "allP.forEach(p => p.hidden = true);"
"Note: that will show the p's while the page loads, but then again that also shows the user that there is data under each title" -> "注意：这将在页面加载时显示

，但这也向用户显示了每个标题下都有数据。"

以下是代码部分，不需要翻译：

  1. window.addEventListener("DOMContentLoaded", () => {
  2.   const allP = document.querySelectorAll(".SubTitle p");
  3.   const allH = document.querySelectorAll(".SubTitle h1");
  4.   // allP.forEach(p => p.hidden = true);
  5.   document.getElementById("toggle").addEventListener("click", (e) => {
  6.     allP.forEach(p => p.hidden = !p.hidden);
  7.     allH.forEach(h => h.hidden = !h.hidden);
  8.   })
  9. });
  1. <button type="button" id="toggle">Toggle</button>
  2. <div class="Title">
  3.   <div class="SubTitle">
  4.     <p hidden>Text</p>
  5.     <h1>Text2</h1>
  6.   </div>
  7. </div>
  8. <div class="Title">
  9.   <div class="SubTitle">
  10.     <p hidden>Text</p>
  11.     <h1>Text2</h1>
  12.   </div>
  13. </div>
  14. <div class="Title">
  15.   <div class="SubTitle">
  16.     <p hidden>Text</p>
  17.     <h1>Text2</h1>
  18.   </div>
  19. </div>

希望这对您有帮助。

英文:

Sure.

Here I add an event listener to a button.

I hid each p first, since I assume you want to show the title when the page loads.

Alternatively hide the Ps onload using script when loading the page:

  1. allP.forEach(p =&gt; p.hidden = true);

Note: that will show the p's while the page loads, but then again that also shows the user that there is data under each title

<!-- begin snippet: js hide: false console: true babel: false -->

<!-- language: lang-js -->

  1. window.addEventListener(&quot;DOMContentLoaded&quot;, () =&gt; {
  2.   const allP = document.querySelectorAll(&quot;.SubTitle p&quot;);
  3.   const allH = document.querySelectorAll(&quot;.SubTitle h1&quot;);
  4.   // allP.forEach(p =&gt; p.hidden = true);
  5.   document.getElementById(&quot;toggle&quot;).addEventListener(&quot;click&quot;, (e) =&gt; {
  6.     allP.forEach(p =&gt; p.hidden = !p.hidden);
  7.     allH.forEach(h =&gt; h.hidden = !h.hidden);
  8.   })
  9. });

<!-- language: lang-html -->

  1. &lt;button type=&quot;button&quot; id=&quot;toggle&quot;&gt;Toggle&lt;/button&gt;
  2. &lt;div class=&quot;Title&quot;&gt;
  3.   &lt;div class=&quot;SubTitle&quot;&gt;
  4.     &lt;p hidden&gt;Text&lt;/p&gt;
  5.     &lt;h1&gt;Text2&lt;/h1&gt;
  6.   &lt;/div&gt;
  7. &lt;/div&gt;
  8. &lt;div class=&quot;Title&quot;&gt;
  9.   &lt;div class=&quot;SubTitle&quot;&gt;
  10.     &lt;p hidden&gt;Text&lt;/p&gt;
  11.     &lt;h1&gt;Text2&lt;/h1&gt;
  12.   &lt;/div&gt;
  13. &lt;/div&gt;
  14. &lt;div class=&quot;Title&quot;&gt;
  15.   &lt;div class=&quot;SubTitle&quot;&gt;
  16.     &lt;p hidden&gt;Text&lt;/p&gt;
  17.     &lt;h1&gt;Text2&lt;/h1&gt;
  18.   &lt;/div&gt;
  19. &lt;/div&gt;

<!-- end snippet -->

huangapple
  • 本文由 发表于 2023年4月11日 13:58:14
  • 转载请务必保留本文链接：https://go.coder-hub.com/75982774.html
  • html
  • javascript
匿名

发表评论

匿名网友

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen:

确定