0

このonclick関数コードを動的にしようとしています。すべての州で50ブロックのコードを使用したくありません。彼はコードの簡単な抜粋です

    var Ohio=function(){
    document.getElementById('texas').style.display='none';
    document.getElementById('florida').style.display='none';
    document.getElementById('ohio').style.display='block';

    }

などなど.....

関数を渡すhtml：

<li onclick="Ohio()" id="ohio" >

などなど。これを凝縮して、より小さく動的にする方法を教えてください。

4

1 に答える 1

2

要素を更新して、共通のクラス ( など) を持つことができる場合、次のようclass="state"になります。

var SetState = function(state) {
    var s = document.getElementsByClassName("state"),
        i;
    for (i=0; i < s.length; i++)
        s[i].style.display = 'none';

    document.getElementById(state).style.display = 'block';
};

つまり、stateクラスですべての要素をループして非表示にし、関数に渡されたものだけを表示します。

SetState('ohio');

または、html を変更できない場合は、すべての州名を配列に入れ、配列をループして非表示にします。

于 2012-09-16T21:40:11.773 に答える