英文:
Hide every element under a div
问题
我正在寻找一种方法，可以在单击按钮时隐藏每个<p></p>并显示<h1></h1>，反之亦然（onclick="javascript hide <p> show <h1>），我可以使用唯一的id来实现，但无法为每个都分配相同的id。有没有其他方法可以做到这一点？最好不使用jquery。
<!-- begin snippet: js hide: false console: true babel: false -->
<!-- language: lang-html -->
<div class="Title">
<div class="SubTitle">
<p>文本</p>
<h1>文本2</h1>
</div>
</div>
<div class="Title">
<div class="SubTitle">
<p>文本</p>
<h1>文本2</h1>
</div>
</div>
<div class="Title">
<div class="SubTitle">
<p>文本</p>
<h1>文本2</h1>
</div>
</div>
<!-- end snippet -->
英文:
I'm looking for a way I can hide each <p></p> and show <h1></h1> instead on click of a button (onclick="javascript hide <p> show <h1>), 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 -->
<div class="Title">
<div class="SubTitle">
<p>Text</p>
<h1>Text2</h1>
</div>
</div>
<div class="Title">
<div class="SubTitle">
<p>Text</p>
<h1>Text2</h1>
</div>
</div>
<div class="Title">
<div class="SubTitle">
<p>Text</p>
<h1>Text2</h1>
</div>
</div>
<!-- end snippet -->
答案1
得分: 0
你可以使用 CSS 选择器 > 来选择直接子元素，并在按钮点击时说，div 元素的直接子元素 p 都切换到隐藏类。你也可以更具体地选择 div > div > p 或 .SubTitle > p。
<!-- 开始代码片段：JavaScript 隐藏: false 控制台: true Babel: false -->
<!-- 语言: lang-js -->
document.getElementById("p").addEventListener("click", () => {
document.querySelectorAll("div > p")
.forEach(el => el.classList.toggle("hidden"));
});
document.getElementById("h1").addEventListener("click", () => {
document.querySelectorAll("div > h1")
.forEach(el => el.classList.toggle("hidden"));
});
<!-- 语言: lang-css -->
.hidden {
display: none;
}
<!-- 语言: lang-html -->
<button id="p">切换 p</button>
<button id="h1">切换 h1</button>
<div class="Title">
<div class="SubTitle">
<p>文本</p>
<h1>文本2</h1>
</div>
</div>
<div class="Title">
<div class="SubTitle">
<p>文本</p>
<h1>文本2</h1>
</div>
</div>
<div class="Title">
<div class="SubTitle">
<p>文本</p>
<h1>文本2</h1>
</div>
</div>
<!-- 结束代码片段 -->
英文:
You can use the css selector > 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 > div > p or .SubTitle > p as well.
<!-- begin snippet: js hide: false console: true babel: false -->
<!-- language: lang-js -->
document.getElementById("p").addEventListener("click", () => {
document.querySelectorAll("div > p")
.forEach(el => el.classList.toggle("hidden"));
});
document.getElementById("h1").addEventListener("click", () => {
document.querySelectorAll("div > h1")
.forEach(el => el.classList.toggle("hidden"));
});
<!-- language: lang-css -->
.hidden {
display: none;
}
<!-- language: lang-html -->
<button id="p">toggle p</button>
<button id="h1">toggle h1</button>
<div class="Title">
<div class="SubTitle">
<p>Text</p>
<h1>Text2</h1>
</div>
</div>
<div class="Title">
<div class="SubTitle">
<p>Text</p>
<h1>Text2</h1>
</div>
</div>
<div class="Title">
<div class="SubTitle">
<p>Text</p>
<h1>Text2</h1>
</div>
</div>
<!-- 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" -> "注意：这将在页面加载时显示
，但这也向用户显示了每个标题下都有数据。"
以下是代码部分，不需要翻译：
window.addEventListener("DOMContentLoaded", () => {
const allP = document.querySelectorAll(".SubTitle p");
const allH = document.querySelectorAll(".SubTitle h1");
// allP.forEach(p => p.hidden = true);
document.getElementById("toggle").addEventListener("click", (e) => {
allP.forEach(p => p.hidden = !p.hidden);
allH.forEach(h => h.hidden = !h.hidden);
})
});
<button type="button" id="toggle">Toggle</button>
<div class="Title">
<div class="SubTitle">
<p hidden>Text</p>
<h1>Text2</h1>
</div>
</div>
<div class="Title">
<div class="SubTitle">
<p hidden>Text</p>
<h1>Text2</h1>
</div>
</div>
<div class="Title">
<div class="SubTitle">
<p hidden>Text</p>
<h1>Text2</h1>
</div>
</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:
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
<!-- begin snippet: js hide: false console: true babel: false -->
<!-- language: lang-js -->
window.addEventListener("DOMContentLoaded", () => {
const allP = document.querySelectorAll(".SubTitle p");
const allH = document.querySelectorAll(".SubTitle h1");
// allP.forEach(p => p.hidden = true);
document.getElementById("toggle").addEventListener("click", (e) => {
allP.forEach(p => p.hidden = !p.hidden);
allH.forEach(h => h.hidden = !h.hidden);
})
});
<!-- language: lang-html -->
<button type="button" id="toggle">Toggle</button>
<div class="Title">
<div class="SubTitle">
<p hidden>Text</p>
<h1>Text2</h1>
</div>
</div>
<div class="Title">
<div class="SubTitle">
<p hidden>Text</p>
<h1>Text2</h1>
</div>
</div>
<div class="Title">
<div class="SubTitle">
<p hidden>Text</p>
<h1>Text2</h1>
</div>
</div>
<!-- end snippet -->
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库，让每个人都能够通过互相帮助和分享经验来进步。
评论