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

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')

...正在测试元素是否具有inline样式集。并非如此：它通过适用于所有此类输入的CSS规则隐藏。因此，您的else案例将执行，并且.display设置为'none'。然后在next上单击，if将按预期工作，并将.display更改为'block'。

[如果实际调试一下函数，您可以自己看一下查看它是否被调用并测试该.display属性的值-如您在此处看到的：http://jsfiddle.net/uLjxp3ha/（注意：我不建议使用alert()进行调试）。

检查由样式表规则设置的当前可见性比较棘手，因为它在浏览器之间无法一致工作。您可能需要测试.currentStyle和.getComputedStyle()是否存在，以允许当前浏览器可能支持的任何一种。请参阅另一个问题的.getComputedStyle()，以获取有关此问题的更多信息。

但是在您的情况下，如果您知道复选框是隐藏的，那么您可以简单地反转if / else：

this answer

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

不会以.display开头，因此将执行else并显示元素。

演示：'block'

Answer 2

您的代码很脆弱，容易破解。我建议您在CSS和javascript之间建立明确的关注点分离。

此外，您对http://jsfiddle.net/uLjxp3ha/1/类的使用是双重的：选择元素并将其隐藏。这是两件事管理得更好，彼此之间没有联系。

更改元素类可能很容易：

check

您需要为实际上隐藏的复选框创建一个新的CSS类。

node_list[i].classList.toggle('check-hidden');

function showCheckbox(){  
    var node_list = document.getElementsByClassName('check');
    for (var i = 0; i < node_list.length; i++) 
    {  
        node_list[i].classList.toggle('check-hidden');
    }
}

.check {
    position:relative;
}

.check-hidden {
    display:none;
}

Answer 3

原因非常简单：当您获得“样式”属性时，它表示该元素的内联样式。第一次单击时，“显示”没有内联样式，因此，否则fork会触发并将“显示”的内联样式设置为“无”]

下一步可能要做的是

1. 使用计算样式

   window.getComputedStyle（node_list [i]）。display ==“ none”

2. 或将“如果”语句切换为

   if（node_list [i] .style.display =='block'）node_list [i] .style.display ='none';else node_list [i] .style.display ='block';

<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>

Answer 4

style.display属性在您第一次执行循环时不存在，您可以如下更改代码：

https://developer.mozilla.org/en-US/docs/Web/API/window.getComputedStyle

一个更好的解决方案可能是（如果可以使用jQuery）

    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) {
            node_list[i].style.display = 'block';
        } else { node_list[i].style.display = 'none'; }
    }
}

Answer 5

而不是编写显示：在您的css文件中没有显示，而是在html文档中内联编写，因此更像是：

    function showCheckbox(){

    $( "input.check" ).each(function() {
        if ($(this).css('display') == 'none'){
            $(this).css('display','block')
        } else {
            $(this).css('display','none')
        }
    });
}