0

我有一系列用 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 个成员（这是我想要的），它会找到隐藏的行并将它们全部显示出来。如何调整我的功能以使其按预期工作？

4

4 回答 4

5

您的 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仅拉取当前内联样式的问题，我发现这篇文章通过使用window.getComputedStyleor来解决这个问题element.currentStyle，两者都拉入当前计算样式，而不仅仅是内联声明。

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

于 2012-05-13T21:21:43.683 回答
1

首先，更正您的代码，因为您在 if 中分配一个值，而不是检查相等性。接下来，如果你可以打破循环，那么只会显示第一个显示为“none”的元素。

for(var i=0; i< hiddenrow.length; i++){
        if(hiddenrow[i].style.display == "none"){
            hiddenrow[i].style.display = "block";
            break;
        }
    }
于 2012-05-13T21:22:40.677 回答
1

嗯，您是否在条件语句中将“==”错误地输入为“=”？

于 2012-05-13T21:24:05.150 回答
0

如果您只想将此应用于第一行，并且仅当它的显示为“无”时，则不要循环。相反，只需使用数组中的第一项，如下所示：

if (hiddenrow.length > 0 && hiddenrow[i].style.display == "none"){
    hiddenrow[0].style.display = "block";
}

OTOH，如果您只想将其应用于第一个具有 display = "none" 的项目，无论它是否是列表中的第一个项目，然后执行：

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

break 运算符停止循环继续。

于 2012-05-13T21:26:12.013 回答