使用按钮显示/隐藏图像和文本

Question

我试图使一些网页样式的按钮显示或隐藏特定的内容时按下。按钮ok，样式ok，显示/隐藏动作ok，但我希望默认情况下不显示内容。因此，我将相关id的显示状态设置为"none"。但是这一次，内容不是在第一次点击按钮时显示，而是在第二次点击按钮时显示。我怎样才能使内容不显示最初，但显示在第一次点击?

function clickFunc1() {
var x = document.getElementById("id-1");
if (x.style.display === "none") {
x.style.display = "block";
} else {
x.style.display = "none"; 
}
}
function clickFunc2() {
var x = document.getElementById("id-2");
if (x.style.display === "none") {
x.style.display = "block";
} else {
x.style.display = "none";  
}
}

#id-1 {
display: none;
}
#id-2 {
display: none;
}

<div class="button-container"> 
<button class="button-style" onclick="clickFunc1()">Button 1</button>
<div id="id-1">
<p>Some text</p>
<img src="images/some-image-1.jpg" alt="Some image">
</div>
<button class="button-style" onclick="clickFunc2()">Button 2</button>
<div id="id-2">
<p>Some text</p>
<img src="images/some-image-2.jpg" alt="Some more image">
</div>
</div>

Answer 1

style属性只包含内联样式。

你需要应用display:noneinline:

function clickFunc1() {
var x = document.getElementById("id-1");
if (x.style.display === "none") {
x.style.display = "block";
} else {
x.style.display = "none";
}
}
function clickFunc2() {
var x = document.getElementById("id-2");
if (x.style.display === "none") {
x.style.display = "block";
} else {
x.style.display = "none";
}
}

<div class="button-container">
<button class="button-style" onclick="clickFunc1()">Button 1</button>
<div id="id-1" style="display:none">
<p>Some text</p>
<img src="images/some-image-1.jpg" alt="Some image">
</div>
<button class="button-style" onclick="clickFunc2()">Button 2</button>
<div id="id-2" style="display:none">
<p>Some text</p>
<img src="images/some-image-2.jpg" alt="Some more image">
</div>
</div>

或者使用window.getComputedStyle()获取元素的CSSDeclaration，使用getPropertyValue("display")获取计算的display属性:

function clickFunc1() {
var x = document.getElementById("id-1");
if (window.getComputedStyle(x).getPropertyValue("display") === "none") {
x.style.display = "block";
} else {
x.style.display = "none";
}
}
function clickFunc2() {
var x = document.getElementById("id-2");
if (window.getComputedStyle(x).getPropertyValue("display") === "none") {
x.style.display = "block";
} else {
x.style.display = "none";
}
}

#id-1 {
display: none;
}
#id-2 {
display: none;
}

<div class="button-container">
<button class="button-style" onclick="clickFunc1()">Button 1</button>
<div id="id-1" style="display:none">
<p>Some text</p>
<img src="images/some-image-1.jpg" alt="Some image">
</div>
<button class="button-style" onclick="clickFunc2()">Button 2</button>
<div id="id-2" style="display:none">
<p>Some text</p>
<img src="images/some-image-2.jpg" alt="Some more image">
</div>
</div>

Answer 2

您的两个函数clickFunc1和clickFunc2做完全相同，除了操作不同的dom元素。这将是一个函数的完美用例，它接受一个dom元素并将显示属性切换到预定义的相反方向(none<->block)。为了更好的可读性和理解，我缩短了你的代码:

const textOne = document.getElementById('textOne');
const textTwo = document.getElementById('textTwo');
const buttonOne = document.getElementById('buttonOne');
const buttonTwo = document.getElementById('buttonTwo');
buttonOne.addEventListener('click', () => { toggle(textOne); });
buttonTwo.addEventListener('click', () => { toggle(textTwo); });
function toggle(e) {
e.style.display = (e.style.display === 'none') ? 'block' : 'none';
}

<div>
<button id="buttonOne">Button 1</button>
<div style="display: none;" id="textOne">
<p>Some text 1</p>
</div>
<button id="buttonTwo">Button 2</button>
<div style="display: none;" id="textTwo">
<p>Some text 2</p>
</div>
</div>