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并显示元素

演示：

原因很简单： 当您获得“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

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

Ψάρεμα


Γήπεδο

第一次执行循环时，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'; }
    }
}

---

不要在css文件中写入display:none，而是将其内联写入html文档中，使其更像：

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

发布代码并标记。确保在HTML之前定义了

showCheckbox

函数。否则，

input

标记将请求一个不存在的函数。。。在头部，错误仍然存在，在我将其放在之后，错误仍然存在。那么，第一次单击不起作用是否会导致浏览器的开发控制台中出现任何错误？（当你说它不会触发函数时，你确定该函数根本没有被调用，而不是被调用但没有正确显示/隐藏复选框吗？）inspect element->console->JS是空的，所以我猜没有错误。在Css上有很多错误，但是它们在其他类的背景上。你是对的。那是一个非常奇怪的错误。谢谢我对Css的评论帮你找到了这个吗？不，我在给出答案后才看到这个评论。哈哈，好吧，你帮我使用了控制台…我想如果JS没有错误，从控制台检查Css是没有用的。我不知道“内联的东西”。谢谢你。我也不明白你说的“易碎，容易破碎”是什么意思我有义务只使用JS no Jquery你所说的“易碎，容易破碎”是什么意思？所谓易碎，我的意思是在这一点上它是易碎的。反转条件可以使其工作，但不会使代码更健壮。css的改变会使它再次崩溃，而软件应该只有一个崩溃的原因。任何与您实施的行为无关的更改都不应破坏该行为。这一切都是关于代码质量的。啊，很高兴看到您绑定到纯JS。我的代码片段是纯JS。为什么要再次中断？你在想什么？简短地说，只是为了提供信息。

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