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()，以允许当前浏览器可能支持的任何一个。有关详细信息，请查看this answer到另一个问题。

但是在你的情况下，如果你知道，隐藏的复选框一开始你可以简单地反转你的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/

Answer 2

您的代码很脆弱，易于破解。我建议你在css和javascript之间创建明确的关注点。

此外，您对check类的使用是双重的：选择元素并隐藏它们。这是两件更好的管理不相互耦合的事情。

更改元素类可以像以下一样简单：

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

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

＆＃13;

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

＆＃13;

.check {
    position:relative;
}

.check-hidden {
    display:none;
}

＆＃13;

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

＆＃13;

Answer 3

原因很简单：当你得到一个＆＃34;风格＆＃34; property，它表示该元素的内联样式。在第一次点击时，＆＃34;显示＆＃34;没有内联样式，所以否则fork fires并设置内联样式为＆＃34;显示＆＃34;到＆＃34;无＆＃34;

你可能会做的是下一步

使用计算样式

window.getComputedStyle（node_list [i]）。display ==＆＃34; none＆＃34;
或切换＆＃34;如果＆＃34;声明

if（node_list [i] .style.display ==＆＃39; block＆＃39;） node_list [i] .style.display =＆＃39; none＆＃39 ;; else node_list [i] .style.display =＆＃39; block＆＃39;;

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

Answer 4

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

    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'; }
    }
}

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

    function showCheckbox(){

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

Answer 5

与其编写显示：您的css文件中没有显示内容，而是在html文档中内联编写，这样更像是：

<input style="display: none" type="checkbox" class="check" />

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

5 个答案: