按钮在第一次点击时不起作用 [英] Button does not function on the first click

问题描述

function showCheckbox(){var node_list = document.getElementsByClassName('check');for (var i = 0; i < node_list.length; i++){if(node_list[i].style.display == 'none') {node_list[i].style.display = 'block';} else { node_list[i].style.display = 'none';}}}

input[type=checkbox]{显示:无；位置:相对；}

<img src="form-images	rash.png" onclick="" style="width:21px;height:24px;margin-left:20px; "/><input type="checkbox" class="check"/><label>Ψάρεμα</label><input type="text"/></br><input type="checkbox" class="check"/><label>Γήπεδο</label><input type="text"/>

当页面第一次加载并且我在第一次点击时按下按钮它不会触发 onclick 功能.如果我第二次按下它会触发事件.

其他 <input type="button"/> 按钮在第一次点击时触发事件没有问题.有没有人知道是什么问题或是否有相同的问题?

解决方案

我认为正在发生的是您的点击处理程序正在在第一次点击时被调用，但是您的if 测试未按您预期的方式工作.这一行:

if(node_list[i].style.display == 'none')

...正在测试元素是否具有 inline 样式集.它没有:它通过适用于所有此类输入的 CSS 规则隐藏.那么你的 else 案例就会执行，并且 .display 被设置为 'none'.然后在 next 单击时，if 按预期工作并将 .display 更改为 'block'.

如果您实际调试一下您的函数，您可以亲眼看到这一点 以查看它是否被调用并测试该 .display 属性的值 - 就像您一样可以在这里看到:http://jsfiddle.net/uLjxp3ha/(注意:我不推荐 alert()s 用于调试).

检查样式表规则设置的当前可见性有点棘手，因为它不能在浏览器中一致地工作.您可能需要测试是否存在 .currentStyle 和 .getComputedStyle() 以允许当前浏览器可能支持的任何一种.查看这个答案另一个问题，了解更多信息.

但在您的情况下，鉴于您知道复选框是隐藏的，您可以简单地反转 if/else:

 if(node_list[i].style.display == 'block') {node_list[i].style.display = 'none';} 别的 {node_list[i].style.display = 'block';}

.display 开始时不会是 'block'，所以 else 将被执行并显示元素.

演示:http://jsfiddle.net/uLjxp3ha/1/

function showCheckbox(){  
    var node_list = document.getElementsByClassName('check');
    for (var i = 0; i < node_list.length; i++) 
    {  
      if(node_list[i].style.display == 'none') { 
        node_list[i].style.display = 'block';
      } else { node_list[i].style.display = 'none'; }
    }
}

input[type=checkbox]{
display:none;
position:relative;
}

<input type="button"  value="Εμφάνιση" onclick="showCheckbox()" />
<img src="form-images	rash.png"  onclick="" style="width:21px;height:24px;margin-left:20px; "/>

    <input type="checkbox" class="check" />   
        <label>Ψάρεμα</label>
        <input type="text"  />
   	</br>
	<input type="checkbox" class="check" />   
        <label>Γήπεδο</label>
        <input type="text"/>
      </br>

When the page loads for first time and I press the button on the first click it does not triggers the onclick function. If I press it the second time it triggers the event.

Other <input type="button"/> buttons triggers the event on the first click without problem. Does anyone know what is the problem or did it have the same?

解决方案

What I think is happening is that your click handler is being called on the first click, but your if test isn't working the way you expect. This line:

if(node_list[i].style.display == 'none')

...is testing whether the element has an inline style set. Which it doesn't: it's hidden via a CSS rule that applies to all such inputs. So then your else case executes and the .display is set to 'none'. Then on the next click, the if works as expected and changes .display to 'block'.

You can see this for yourself if you actually debug your function a little to see if it is getting called and test the value of that .display property - as you can see here: http://jsfiddle.net/uLjxp3ha/ (note: I don't recommend alert()s for debugging).

Checking the current visibility as set by stylesheet rules is a bit trickier because it doesn't work consistently across browsers. You may need to test for existence of .currentStyle and .getComputedStyle() to allow for whichever one the current browser might support. Have a look at this answer to another question for more information about that.

But in your case given that you know the checkboxes are hidden to begin with you can simply invert your if/else:

  if(node_list[i].style.display == 'block') { 
    node_list[i].style.display = 'none';
  } else {
    node_list[i].style.display = 'block';
  }

The .display will not be 'block' to start with, so the else will be executed and the elements will be displayed.

Demo: http://jsfiddle.net/uLjxp3ha/1/

这篇关于按钮在第一次点击时不起作用的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！