数组的第一个成员

Question

我有一系列div,我用css display隐藏了:none;.

<div id="" class="hidden_row">some code</div>
<div id="" class="hidden_row">some code</div>
<div id="" class="hidden_row">some code</div>

我也有一个onclick"addRow();"按钮 通过将其css声明更改为"display:block;"来设计为在每次单击时顺序显示一个隐藏行的函数.javascript看起来像这样:

function addRow(){
    var hiddenrow = getElementsByClassName(document, "*", "hidden_row");

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

但是,该函数在执行时不会更改数组的1个成员(这是我想要的),它会找到隐藏的行并将它们全部显示出来.如何调整我的功能以使其按预期工作？

Answer 1

你的if语句中有拼写错误

if(hiddenrow[i].style.display = "none"){

应该

if(hiddenrow[i].style.display == "none"){

编辑:请注意.style.display仅检查内联样式,因此您必须检查

if(hiddenrow[i].style.display != "block"){

相反,因为这更好地支持你想要的

正如达哈泽所说,如果你想一次只展示一个,你需要break;在找到你想要的之后再放一个.

工作JsFiddle:http://jsfiddle.net/STGhq/

和你修改过的功能

function addRow(){
    var hiddenrow = document.getElementsByClassName("hidden_row");
    for(var i=0; i< hiddenrow.length; i++){
        if(hiddenrow[i].style.display != "block"){
            hiddenrow[i].style.display = "block";
            break;
        }
    }
}?

解决了element.style只提取当前内联样式的问题,我发现这篇文章通过使用window.getComputedStyle或者element.currentStyle两者来解决它,它们都引入了当前计算的样式,而不仅仅是内联声明.

使用新代码http://jsfiddle.net/STGhq/2/工作jsFiddle