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

函数showCheckbox（）{
var node_list=document.getElementsByClassName（'check'）；
对于（变量i=0；i

输入[类型=复选框]{
显示：无；
位置：相对位置；
}

Ψάρεμα


Γήπεδο

我认为正在发生的事情是，在第一次单击时会调用您的单击处理程序，但是您的

if

测试没有按照您期望的方式工作。这一行：

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

…正在测试元素是否具有内联样式集。它没有：它是通过一个CSS规则隐藏的，该规则适用于所有这些输入。因此，您的

else

案例将执行，

.display

设置为

'none'

。然后在下一次单击时，

if

按预期工作，并将

.display

更改为

'block'

如果您实际调试函数一点，您可以自己看到这一点，以查看它是否被调用，并测试该

属性的值。display

属性-正如您在这里看到的：（注意：我不建议

alert（）

s用于调试）

检查由样式表规则设置的当前可见性有点棘手，因为它不能在浏览器之间一致地工作。您可能需要测试是否存在

.currentStyle

，并考虑当前浏览器可能支持的任何一种。请看另一个问题，了解更多信息

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

---

演示：

我认为正在发生的是，您的单击处理程序在第一次单击时被调用，但是您的

if

测试没有按照您期望的方式工作。这一行：

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

…正在测试元素是否具有内联样式集。它没有：它是通过一个CSS规则隐藏的，该规则适用于所有这些输入。因此，您的

else

案例将执行，

.display

设置为

'none'

。然后在下一次单击时，

if

按预期工作，并将

.display

更改为

'block'

如果您实际调试函数一点，您可以自己看到这一点，以查看它是否被调用，并测试该

属性的值。display

属性-正如您在这里看到的：（注意：我不建议

alert（）

s用于调试）

检查由样式表规则设置的当前可见性有点棘手，因为它不能在浏览器之间一致地工作。您可能需要测试是否存在

.currentStyle

，并考虑当前浏览器可能支持的任何一种。请看另一个问题，了解更多信息

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

演示：

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

你可以做的是下一步

使用计算样式

window.getComputedStyle（节点列表[i]）。显示==“无”

或者将“if”语句切换为

if（节点列表[i].style.display=='block'） 节点列表[i].style.display='none'； else节点_列表[i]。style.display='block'

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

你可以做的是下一步

使用计算样式

window.getComputedStyle（节点列表[i]）。显示==“无”

或者将“if”语句切换为

if（节点列表[i].style.display=='block'） 节点列表[i].style.display='none'； else节点_列表[i]。style.display='block'

---

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

另外，您对

check

类的使用有两个方面：选择元素并隐藏它们。这两件事最好不要相互耦合

更改元素类非常简单，如下所示：

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

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

函数showCheckbox（）{
var node_list=document.getElementsByClassName（'check'）；
对于（变量i=0；i

。检查{
位置：相对位置；
}
.检查隐藏的{
显示：无；
}

Ψάρεμα


Γήπεδο

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

另外，您对

check

类的使用有两个方面：选择元素并隐藏它们。这两件事最好不要相互耦合

更改元素类非常简单，如下所示：

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

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

函数showCheckbox（）{
var node_list=document.getElementsByClassName（'check'）；
对于（变量i=0；i

。检查{
po