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;」に変更することにより、クリックごとに1つの非表示行を順番に表示するように設計された関数。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"){

代わりに、これはあなたが望むものをよりよくサポートするので

ダーハザーが言ったように、一度に1つずつ表示したい場合は、必要なもの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.getComputedStyleelement.currentStyle

新しいコードでjsFiddleを操作する http://jsfiddle.net/STGhq/2/

于 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

これを最初の行にのみ適用し、表示が「none」の場合にのみ、ループしないでください。代わりに、次のように、配列の最初の項目を使用してください。

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;
    }
}

ブレーク演算子は、ループの続行を停止します。

于 2012-05-13T21:26:12.013 に答える