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

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 测试没有按您预期的方式工作。这一行：

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

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

如果你实际调试你的函数，你可以自己看到这一点看看它是否被调用并测试它的值.display属性 - 正如你在这里看到的：http://jsfiddle.net/uLjxp3ha/（注意：我不推荐使用 alert()s 进行调试）。

检查样式表规则设置的当前可见性有点棘手，因为它不能跨浏览器一致地工作。您可能需要测试 .currentStyle 和 .getComputedStyle() to allow for whichever one the current browser might support. Have a look at 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/

Answer 2

原因很简单：当你得到 "style" 属性时，它表示该元素的内联样式。第一次点击时 "display" 没有内联样式，所以 fork 触发并将 "display" 的内联样式设置为 "none"

接下来你可以做的是

使用计算样式

window.getComputedStyle(node_list[i]).显示=="none"
或将"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 3

你的代码很脆弱，很容易被破解。我建议您在 css 和 javascript.

之间明确区分关注点

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

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

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

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

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 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 文件中写入显示：none，不如将其内联写入 html 文档中，这样它更像是：

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

Answer 6

这样做并尝试我会工作，因为 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'; }
    }

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

Button does not function on the first click

html

javascript

button

dom-events