按钮在第一次单击时不起作用

Question

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\trash.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>

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

其他按钮在第一次单击时触发事件没有问题.有谁知道问题是什么,或者他有同样的问题吗？

Answer 1

我认为正在发生的事情是,你的点击处理程序被调用的第一次点击,但是你的if测试不工作,你期望的方式.这一行:

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

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

你可以自己看看这个,如果你实际调试你的函数,看看它是否被调用并测试该.display属性的值- 你可以在这里看到:http://jsfiddle.net/uLjxp3ha/(注意:我不喜欢不建议alert()用于调试.

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

但是在你的情况下,你知道隐藏的复选框一开始就可以简单地反转你的if/else:

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

该.display不会'block'下手,所以都不会被执行,元素将被显示出来.

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