数组的第一个成员

first member of array

本文关键字：成员 第一个 数组      更新时间：2023-09-26

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

你的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.getComputedStyle 或 element.currentStyle 来解决它，两者都拉入当前的计算样式，而不仅仅是内联声明。

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

首先，更正您的代码，因为您要在 if 中分配一个值，而不是检查相等性。接下来，如果可以中断循环，则仅显示第一个元素，该元素显示为"无"。

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

嗯，您是否在条件语句中错误地将"=="键入为"="？

如果您只希望将其应用于第一行，并且仅当它的显示为"无"时，请不要循环。 相反，只需使用数组中的第一项，如下所示：

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

OTOH，如果您只想将其应用于显示 = "none" 的第一个项目，无论它是否是列表中的第一项，那么请执行：

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

中断运算符阻止循环继续。

相关文章：