Question

我有以下代码创建了一些函数：hidePara1()，它在段落的CSS hidden属性之间切换;和displayFrame()，它与iframe的display属性相同。段落和Iframe分别使用CSS设置为display:none和visibility:hidden。

var Par1 = document.getElementById("para1");
var Frame1 = document.getElementById("iframe1");        

function hidePara1() {
  Par1.style.display = ((Par1.style.display!='none') ? 'none' : 'block')
}

function displayFrame() {
  Frame1.style.visibility = ((Frame1.style.visibility!='hidden') ? 'hidden' : 'visible');
}

元素存在的HTML，我也通过onClick属性调用函数。

<a href="#" onClick="displayFrame();">Display iFrame</a>        
<div class="frame-container"><iframe id="iframe1" src="somelink" width="800" height="460"></iframe></div>

<img id="img1" onClick="hidePara1();" src="someimage.jpg">
<div id="para1">
<p>This is the text for paragraph 1.</p>
</div>

问题很奇怪：两个onclick事件都可以正常工作，从第二次点击开始。换句话说，首次点击时都不起作用。从我遇到的其他类似问题来看，这似乎是一个非常普遍的问题，但我无法弄明白，其中一个问题可以帮助我。请注意，它也需要是vanilla JS - 框架不会做。

非常感谢对此的解决方案。

由于

Answer 1

在处理程序中，您可以访问Par1.style。元素的style属性引用内联style="..." HTML属性中的样式属性。你在其他地方指定了，你在CSS中有类似的内容：

#para1 {
    display: none;
}

这不会在Par1.style.display中被提取。如果您想查看当前应用的内容，请查看getComputedStyle。 fiddle

或者只是以相反的方式做你的条件：

Par1.style.display = ((Par1.style.display!='block') ? 'block' : 'none')

Answer 2

当你说这些元素是使用CSS设置样式时，我认为你的意思是＆＃34;使用某些选择器设置样式，例如#para1 { display:none; }＆＃34;

Par1.style.display但是，只查找div上的style属性，在上面假设的情况下，最初未设置。因此，第一次单击将在div上设置style="display:none;"，您应该可以使用开发人员工具或firebug来观察它。

Answer 3

这些：

var Par1 = document.getElementById("para1");
var Frame1 = document.getElementById("iframe1");

应该在加载时完成，即：

// Global declaration, thos I don't think this matter as much as....
var Par1 ;
var Frame1 ;        


// ...this.  Your calls to getElementById() may be executing before 
// the page has finished loading.  Making the assignment in OnLoad
// guarantees the elements are available an I'm thinking should fix 
// the issue with it not working first time through.

function init() {
  Par1 = document.getElementById("para1");
  Frame1 = document.getElementById("iframe1");        
}

html：

<body onload="init();">

Answer 4

FIDDLE DEMO

您的代码在小提琴上完美运行。

<a href="#" onclick="displayFrame();">Display iFrame</a>        
<div class="frame-container"><iframe id="iframe1" src="somelink" width="800" height="460"></iframe></div>

<img id="img1" onclick="hidePara1();" src="someimage.jpg">
<div id="para1">
<p>This is the text for paragraph 1.</p>
</div>

<script>
var Par1 = document.getElementById("para1");
var Frame1 = document.getElementById("iframe1");        

function hidePara1() {
  Par1.style.display = ((Par1.style.display!='none') ? 'none' : 'block')
}

function displayFrame() {
  Frame1.style.visibility = ((Frame1.style.visibility!='hidden') ? 'hidden' : 'visible');
}
</script>

OnClick功能仅在第二次单击时起作用

4 个答案: