2

選択されたオプションに応じてdivを表示するドロップダウンリストを作成するために、javascriptで遊んでいます。

すべてのコードはここで見ることができます:

http://jsfiddle.net/nmdTy/

var select = document.getElementById('test'),
onChange = function(event) {
    var shown = this.options[this.selectedIndex].value == 1;
    document.getElementById('hidden_div').style.display = shown ? 'block' : 'none';
};

このコードを合理化し、繰り返しを削除する方法を知りたいです-おそらく何らかのループですか？

4

4 に答える 4

1

別のコード:

var select = document.getElementById('test'),
    nbItems = 2,
    onChange = function (event) {
        var val = this.options[this.selectedIndex].value;

        for (var i = 1; i <= nbItems; i++) {
            document.getElementById('hidden_div' + i).style.display = val == i ? 'block' : 'none';
        }
    };

http://jsfiddle.net/nmdTy/11/

于 2013-04-17T14:29:03.110 に答える
0

「繰り返し」が何を意味するのかはよくわかりませんが、私の推測では、div非表示/表示するすべての s を入力したくないということです。
このようなタスクには複数のアプローチが考えられます。最も普遍的なdivのは、ID を別の配列に持つことです。次に、選択した div 以外のすべてを非表示にできます。

var divs = ["hidden_div1", "special_hidden", "one_more_hidden"];  
var select = document.getElementById('test');
var onchange = function(event) {   //Use var!
    var shown = this.options[this.selectedIndex].value;
    for(var i=0; i<window.divs.length; i++) {   //It would be more effective to save last shown div in a variable, but I've chosen this aproach with loop
        var div = document.getElementById(window.divs[i]);
        if(div!=null) {
          if(i==shown)  
            div.style.display="block";
          else
            div.style.display="none";
        }
    }
};
select.addEventListener("change", onchange);  //Could type the function right here, without using "onchange" variable

私のコードでは、<option>値は配列内のインデックスを表します。ここにjsFiddleがあります。

于 2013-04-17T14:21:55.847 に答える
0

IE<9 で変更イベントを委譲するのは面倒です。この質問をチェックして、それがどのように行われたかを確認することは可能ですが、エレガントとは言えません。

しかし、あなたのコードはイベントをデリゲートしていないので、イベントにハンドラーを直接アタッチするだけでonloadうまくいくはずです (そして、X ブラウザーと互換性があります)。

document.getElementById('test').onchange = function(e)
{
    e = e || window.event;//the only IE headache
    var shown = this.options[this.selectedIndex].value == 1;
    document.getElementById('hidden_div').style.display = shown ? 'block' : 'none';
    //^^ could keep a reference to this in a closure
};

完全なコード (非表示のdivへonloadのクロージャ参照とie でのメモリ リークの防止) は次のようになります。 

var winLoad = function(e)
{
    var hiddenDiv = document.getElementById('hidden_div');
    document.getElementById('test').onchange = function(e)
    {
        var shown = !!(this.option[this.selectedIndex].value == 1);//to be safe, coerce to bool
        hiddenDiv.style.display = shown ? 'block' : 'none';
    };
    if (window.addEventListener)
    {
        return window.removeEventListener('load',winLoad,false);
    }
    return window.detachEvent('onload',winLoad);
};
if (window.addEventListener)
{
    window.addEventListener('load',winLoad,false);
}
else
{
    window.attachEvent('onload',winLoad);
}

これは、IE7 (おそらく IE6 も) を含め、すべての主要なブラウザーで正常に動作するはずです。

于 2013-04-17T14:22:20.770 に答える