javascript - 数组的第一个成员

Question

我有一系列用 css display:none; 隐藏的 div。

<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"){

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

正如 Darhazer 所说，如果您想一次只显示一个，则需要在找到所需的内容后添加一个 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 仅拉取当前内联样式的问题，我发现 this article通过使用 window.getComputedStyle 或 element.currentStyle 来解决这个问题，这两者都引入当前的计算样式，而不仅仅是内联声明.

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