Question

测试一个简单的切换显示，然而，第一次切换显示需要两次点击。之后它会在一个中完成。

<html>
<head>
<style>
#carousel{border:2px solid blue;
width:1280px;
height:720px;}

#p2{visibility:hidden;}

#p1{display:block;}

#btn{position:absolute;
    top:2000px;}
</style>

<script src="mainScript.js"></script>
</head>

<body>

<div id="carousel">
    <img id="p1" src="pic1.jpg">
    <img id="p2" src="pic2.jpg">
</div>

<button type="button" id="button" onclick="clickEvent()">Click</button>

</body>
</html>

这是我的javascript：

function clickEvent(){
var p = document.getElementById("p1");
if(p.style.display == "block")
    p.style.display = "none";
else
    p.style.display = "block";
}

应该注意我没有使用jQuery，因为我发现的所有其他问题都与jQuery有关。

Answer 1

function clickEvent(){
var p = document.getElementById("p1");
if(p.style.display == "none")
    p.style.display = "block";
else
    p.style.display = "none";
}

您还可以简化一些事情：

p.style.display = p.style.display == "none" ? "block" : "none";

Answer 2

默认的显示属性是“内联”，因此您的逻辑不考虑这一点。它在第一次运行时将其更改为块，因此它仍然可见，然后在第二次单击时隐藏它（将显示设置为无）

Answer 3

我在上面的评论中发布了对我之前小提琴的更新。在进一步测试双击之后，我之前的小提琴仍然遇到了同样的问题。

单步执行后，初始显示值将返回""而不是block。我不确定为什么它没有考虑你在<head></head>部分设置的价值，但如果你这样内联它：

<img id="p1" src="pic1.jpg" style="display: none;" />

只需单击一下按钮，第一次就能正常工作。

以下是我最新更新的fiddle，展示了这一点。

我将更详细地介绍为什么你的样式在<head></head>部分，但是现在，这是一个快速（和半原始）修复。

希望这有帮助，祝你好运！

Answer 4

只需将"block" : "none";替换为?"none" : "block";即可解决同样的问题你不需要第一次双击切换按钮，单击就可以了。

HTML / Javascript - 按钮需要两次点击才能执行点击事件

4 个答案: