0

情報の非表示と表示を切り替える JavaScript コードがあり、テキストの 1 つの showMoreText セクションに対して機能しますが、すべての異なるリンクに対して 16 の異なる切り替えオプションが必要です。「モンタナの氷河」の下にある画像が含まれています。なぜ重要なのですか? トグルはしますが、「Ice now covers...」リンク専用の別の JavaScript ページ (toggle2.js) を作成しましたが、表示されません。ここに画像の説明を入力

toggle.js の最初のトグル オプションのコード

window.onload = function(){
    document.getElementById('toggle').onclick = showMore;
}

function showMore(){
    var div = document.getElementById('showMoreText');
    var display = div.style.display;
    display == "none" ? div.style.display = "block" : div.style.display = "none";
}

toggle2.js の 2 番目のトグル オプションのコード

window.onload = function(){
    document.getElementById('toggle2').onclick = showMore;
}

function showMore(){
    var div = document.getElementById('showMoreText2');
    var display = div.style.display;
    display == "none" ? div.style.display = "block" : div.style.display = "none";
}

toggle1 の HTML 内のコード

<div id="showMoreText" style="display: none"> (missing paranthesis)

toggle2 の HTML 内のコード

<div id="showMoreText" style="display: none"> (missing paranthesis)

なにが問題ですか？多くの異なるトグル (1 ～ 16) に切り替えられるようにしたいのですが、toggle1 をクリックして、toggle 2 をクリックしても変化しません。適切に機能することを妨げている変数は何ですか?

ありがとうございました！

4

3 に答える 3

2

Aleks Gの回答に基づいてさらに最適化:

あなたのスクリプト：

window.onload = function(){
    for(var i=0; i<3; i++){      //here is set to 3
        document.getElementById('toggle'+i).onclick = function(i){
            return function(){
                showMore('showMoreText'+i);
            }
        }(i);
    }
}

function showMore(id){
    var div = document.getElementById(id),
        display = div.style.display;
    display == "none" ? div.style.display = "block" : div.style.display = "none";
}

HTML:

<div id="toggle1" class="toggle"></div>
<div id="toggle2" class="toggle"></div>
<div id="toggle3" class="toggle"></div>

CSS:

div.toggle{
    display: none;
}

id実際には、 inも必要ありませんdiv。クラスをループして、toggleすべての を見つけることができますdiv。

于 2012-06-10T20:02:55.380 に答える
0

完全な答えではありませんが、上記に沿って、window.onload 関数を単一のオブジェクトに単純化し、コードをリサイクルすることができます。

window.onload = function() {
 var tList={'toggle1': 'showMore1','toggle2': 'showMore2','toggle3': 'showMore3'};
 for(var i in tList){document.getElementById(i).onclick = tList[i]};
}
于 2012-06-10T20:11:39.150 に答える
0

すべてのトグルを個別に用意する必要があるのはなぜですか? なぜこれをしないのですか？

window.onload = function(){
    document.getElementById('toggle').onclick = showMore1;
    document.getElementById('toggle2').onclick = showMore2;
    document.getElementById('toggle3').onclick = showMore3;
    ...
}

function showMore1() { showMore('showMoreText'); }
function showMore2() { showMore('showMoreText2'); }
function showMore3() { showMore('showMoreText3'); }
...

function showMore(id){
    var div = document.getElementById(id);
    var display = div.style.display;
    display == "none" ? div.style.display = "block" : div.style.display = "none";
}

これは非常に大雑把です。自由にさらに最適化してください。

于 2012-06-10T19:54:13.350 に答える