如何创建隐藏/显示切换

Question

我有两张带有隐藏/显示切换的翻转卡。但当我点击第二张卡片上的隐藏/显示按钮时，它不起作用。如何使其在单击第二张翻盖卡上的隐藏/显示开关时开始工作。我希望你能理解。

这是我的翻盖卡片

<div id="main">
<div name="first flip card" style="margin-left: 50px ;padding: ;">
<label>
<input type="checkbox" />
<div class="flip-card">
<div class="front">     
<h1>Գերմանիա</h1>
<p style="font-size: 50px;">1</p>
</div>
<div class="back">
<h1>About me</h1>
<hr />
<p>some text</p>
<button id='button' >hide/show</button>
<p id="newpost" style="display: none;" > Test text</p>
<hr />
</div>
</div>
</label>
</div>
<div name="second flip card" style="margin-left: 50px ;">
<label>
<input type="checkbox" />
<div class="flip-card">
<div class="front">

<h1>Գերմանիա</h1>
<p style="font-size: 50px;">1</p>
</div>
<div class="back">
<h1>About me</h1>
<hr />
<p>some text</p>
<button id='button' >hide/show</button>
<p id="newpost" style="display: none;" > Test text</p>
<hr />              
</div>
</div>
</label>
</div>
</div>  

这是我的隐藏/显示按钮的脚本

<script>
var button = document.getElementById('button');
button.onclick = function() {
var div = document.getElementById('newpost');
if (div.style.display !== 'none') {
div.style.display = 'none';
}
else {
div.style.display = 'block';
}
};
</script>

我希望你能帮我

我试了很多种选择，但每一种都有不同的选择。例如，我在其中一个脚本中尝试了其他脚本，但文本根本没有显示，在第二个选项中，当我在第二张翻转卡上按下隐藏/显示时，它显示了第一张翻转卡的文本。

Answer 1

欢迎来到stackoverflow。

根据W3C标记验证服务工具，该文档包含许多错误，包括"；重复ID"；错误(参见：W3C验证器(

注意：id全局属性定义了一个标识符(id(，必须是在整个文档中是唯一的。它的目的是在链接(使用片段标识符(、脚本或样式(使用CSS(时识别元素。(参见：MDN的HTML id(

所以我们需要使用一个类而不是‍CCD_ 1 id以针对那些元素。

将HTML更改为以下内容——通过格式化代码并修复这些错误：

<div id="main">
<div style="margin-left: 50px;">
<input type="checkbox" />
<div class="flip-card">
<div class="front">
<h1>Գերմանիա</h1>
<p style="font-size: 50px;">1</p>
</div>
<div class="back">
<h1>About me</h1>
<hr />
<p>some text</p>
<button type="button">hide/show</button>
<p class="newpost" style="display: none;"> Test text</p>
<hr />
</div>
</div>
</div>
<div style="margin-left: 50px ;">
<input type="checkbox" />
<div class="flip-card">
<div class="front">
<h1>Գերմանիա</h1>
<p style="font-size: 50px;">1</p>
</div>
<div class="back">
<h1>About me</h1>
<hr />
<p>some text</p>
<button type="button">hide/show</button>
<p class="newpost" style="display: none;"> Test text</p>
<hr />
</div>
</div>
</div>
</div>

脚本：

此脚本扫描整个DOM中的所有button元素。然后，每当您单击button时，它首先会找到该按钮的parentElement，然后在相应的parentElement中切换具有newpost类的第一个元素。

<script>
document.querySelectorAll('button').forEach((button) => {
button.addEventListener('click', (event) => {
const newpostElement = event.target.parentElement.querySelector('.newpost');
if (newpostElement.style.display !== 'none')
newpostElement.style.display = 'none';
else
newpostElement.style.display = 'block';
})
});
</script>

---

了解HTML错误：

• div元素的name属性使用无效
• padding: ;的使用无效
• 元素newpost0不允许作为元素label的子元素
• label元素最多可以包含一个button、input、meter、output、progress、select或textarea后代
• 重复ID按钮

Answer 2

根据你的问题，我理解你想要这样的东西：=

$("h1").on("click", function(){
console.log($(this).children("div"));
$(this).siblings("div.content").slideToggle();
});​

.content{
display:none;
margin: 10px;   
}
h1{
font-size: 16px;
font-wieght: bold;
color: gray;
border: 1px solid black;
background: #eee;
padding: 5px;
}
h1:hover{
cursor: pointer;
color: black;   
}

<div class="article">
<h1>TITLE 1</h1>
<div class="content">content 1</div>
</div>
<div class="article">
<h1>TITLE 2</h1>
<div class="content">content 2</div>
</div>
<div class="article">
<h1>TITLE 3</h1>
<div class="content">content 3</div>
</div>
<div class="article">
<h1>TITLE 4</h1>
<div class="content">content 4</div>
</div>

http://jsfiddle.net/Rwx7P/3/

Answer 3

如果有两个ID相同的块(按钮和newpost(，则在一个页面上必须始终不同。

function toggle(id) {
var div = document.getElementById(id);
if (div.style.display !== 'none') {
div.style.display = 'none';
}
else {
div.style.display = 'block';
}
}

<div id="main">
<div name="first flip card" style="margin-left: 50px; padding: ">
<label>
<input type="checkbox" />
<div class="flip-card">
<div class="front">
<h1>Գերմանիա</h1>
<p style="font-size: 50px">1</p>
</div>
<div class="back">
<h1>About me</h1>
<hr />
<p>some text</p>
<button onclick="toggle('newpost1')">hide/show</button>
<p id="newpost1" style="display: none">Test text</p>
<hr />
</div>
</div>
</label>
</div>
<div name="second flip card" style="margin-left: 50px">
<label>
<input type="checkbox" />
<div class="flip-card">
<div class="front">
<h1>Գերմանիա</h1>
<p style="font-size: 50px">1</p>
</div>
<div class="back">
<h1>About me</h1>
<hr />
<p>some text</p>
<button onclick="toggle('newpost2')">hide/show</button>
<p id="newpost2" style="display: none">Test text</p>
<hr />
</div>
</div>
</label>
</div>
</div>