1

私は3つの「ボックス」を作成し、各ボックスにはボタンが含まれています。ボタンをクリックするとボックスが非表示になり、もう一度クリックするとボックスが表示されます。

これは私のhtmlコードです：

<div id="SC1_A_"> <!-- BOX -->
<div id="SC1_B_" onClick="SC1();" class="something">&nbsp;</div> <!-- BUTTON -->
</div>
<div id="SC2_A_">
<div id="SC2_B_" onClick="SC2();" class="something">&nbsp;</div>
</div>
<div id="SC3_A_">
<div id="SC3_B_" onClick="SC3();" class="something">&nbsp;</div>
</div>

これは私のJavaScriptコードです：

<script type="text/javascript">    
function SC1(){

  var SC1_A = document.getElementById('SC1_A_);
  var SC1_B = document.getElementById('SC1_B_);

  if (SC1_A.style.display == 'block' || SC1_A.style.display == ''){
      SC1_A.className      = 'something';
      SC1_B.className      = 'something else';}   
else {SC1_A.className      = 'something else';
      SC1_B.className      = 'something';}
     }
     }
</script>

上記の例は機能しますが、ボタンごとに3つの同様のスクリプトを作成する必要があります。そこで、forループを使用して、以下のスクリプトのようなものを作成します。ご想像のとおり、機能しませんでした。どうすればそれを機能させることができますか？

<script type="text/javascript">

for (i=1; i<10; i++){

function SCi(){

  var SCi_A = document.getElementById('SC'+i+'_A_');
  var SCi_B = document.getElementById('SC'+i+'_B_');

  if (SCi_A.style.display == 'block' || SCi_A.style.display == ''){
      SCi_A.className      = 'something';
      SCi_B.className      = 'something else';}   
else {SCi_A.className      = 'something else';
      SCi_B.className      = 'something';}
     }
     }
</script>

質問が簡単すぎると思われる場合は、反対票を投じないでください。ここで私に助けてください!!! 前もって感謝します！！！

4

5 に答える 5

3

あなたは正しい方向に進んでいます、あなたはあなたが表現しようとしているもののための正しい構文を学ぶ必要があるだけです：

var SC = [];

まず、多くの異なる関数を使用するために、それらに異なる名前を付けるのではなく（これを実行しようとしていた）、各関数をSC配列内の異なるインデックスに格納するだけです。

for (var i = 1; i < 10; i++) {
    SC[i] = (function () {
        var SC_A = document.getElementById('SC' + i + '_A_');
        var SC_B = document.getElementById('SC' + i + '_B_');

        return function () {
            if (SC_A.style.display === 'block' || SC_A.style.display === '') {
                SC_A.className = 'something';
                SC_B.className = 'something else';
            } else {
                SC_A.className = 'something else';
                SC_B.className = 'something';
            }
        }
    })();
}

ここで、これらの関数を呼び出すには、、、SC[1]()...を実行しSC[2]()ます。したがってonclick、HTMLのそれぞれに関数を配置するか、JavaScriptからイベントをバインドすることができます。

編集：コードの構文に直接関係していないため、これについて言及するのを忘れましたが、'document.getElementById`will not work until the document is fully loaded. So if you just put the script directly between toタグの呼び出しは機能しません。2つの選択肢があります。現在のコードを保持することもできますが、ページが読み込まれたときに実行します。または、次のようにコードを再構築できます。

var SC = [];
for (var i = 1; i < 10; i++) {
    SC[i] = (function (i) {
        return function () {
            var SC_A = document.getElementById('SC' + i + '_A_');
            var SC_B = document.getElementById('SC' + i + '_B_');

            if (SC_A.style.display === 'block' || SC_A.style.display === '') {
                SC_A.className = 'something';
                SC_B.className = 'something else';
            } else {
                SC_A.className = 'something else';
                SC_B.className = 'something';
            }
        }
    })(i);
}

ここで起こっていることはdocument.getElementById、関数が作成されたときに1回だけではなく、ボタンがクリックされるたびに呼び出しているということです。少し効率が悪くなりますが、機能します。

于 2013-01-18T21:37:39.017 に答える
2

ページ上の各セクションは、一方の関数を呼び出し、もう一方の関数の名前を渡すものとして定義します。

<div id="SC1_A_"> <!-- BOX -->
<div id="SC1_B_" onClick="SC('SC1_A_');" class="something">&nbsp;</div> <!-- BUTTON -->
</div>
<div id="SC2_A_">
<div id="SC2_B_" onClick="SC('SC2_A_');" class="something">&nbsp;</div>
</div>
<div id="SC3_A_">
<div id="SC3_B_" onClick="SC('SC3_A_');" class="something">&nbsp;</div>
</div>

それらすべてに使用される関数は1つだけです

function SC(nameOfA){

   var SCi_A = document.getElementById(nameOfA);
   var SCi_B = this;

   if (SCi_A.style.display == 'block' || SCi_A.style.display == ''){
       SCi_A.className      = 'something';
       SCi_B.className      = 'something else';
   } else {
       SCi_A.className      = 'something else';
       SCi_B.className      = 'something';}
   }
}
于 2013-01-18T21:38:53.517 に答える
1

ここでは、クリックするたびにこの機能を使用できます。

    <div id="SC1_A_"> <!-- BOX -->
         <div id="SC1_B_" onClick="SC(event)" class="something">&nbsp;</div> <!-- BUTTON -->
    </div>
<script type="text/javascript">
    function SC(event){
        var SCA = event.currentTarget.parentNode;
        var SCB = event.currentTarget;

        ................
    }
</script>
于 2013-01-18T21:51:32.297 に答える
0

あなたのコードはSCiという名前の関数を8回定義しています。最初の2行を入れ替えれば、欲しいものが手に入ると思います。

于 2013-01-18T21:36:04.637 に答える
0

同じ関数（function SCi）を8回再定義しています。保持される関数の唯一のバージョンは、最後に定義されたバージョンです。コードを見ると、8番目のボックスで機能する関数のみを作成していることになります。

于 2013-01-18T21:37:10.027 に答える