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

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 功能。 如果我第二次按下它会触发事件。

其他<input type="button"/> 按钮在第一次点击时触发事件没有问题。 有谁知道是什么问题还是有同样的问题？

Answer 1

这样做并尝试我会工作，因为 if 语句首先检查代码然后运行

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

Answer 2

不要在你的 css 文件中写 display: none ，而是在你的 html 文档中内联写它，这样它会更像：

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

Answer 3

第一次循环时 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 4

您的代码很脆弱，容易破解。我建议您在 css 和 javascript 之间创建一个清晰的关注点分离。

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

更改元素类可能很简单：

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

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

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

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

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

接下来你可以做的事情

1. 使用计算样式

   window.getComputedStyle(node_list[i]).display == "none"

2. 或者将“if”语句切换到

   if(node_list[i].style.display == 'block') node_list[i].style.display = 'none'; 否则 node_list[i].style.display = 'block';

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

Answer 6

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

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

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

如果您实际稍微调试一下您的函数，您可以自己看到这一点，看看它是否被调用并测试该 .display 属性的值 - 如您在此处看到的：@987654321 @（注意：我不推荐使用alert()s 进行调试）。

检查样式表规则设置的当前可见性有点棘手，因为它在浏览器中的工作不一致。您可能需要测试 .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' 开头，因此将执行 else 并显示元素。

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