forループで複数の関数を作成する

Question

まず、この問題に対処するように見えるカップルリンクを見つけましたが、javascript（および一般的なコード）の理解はかなり悪く、ソリューション/説明は一般化するのが難しいここに。私はそれが閉鎖（私はぼんやりと理解する）と関係していることを知っています。

背景： チェックボックスをオンにしたときに表示されるはずの4つのラジオボタンを持つループを使用して、10個のチェックボックスを作成しました。私は、10個以上の関数を1つずつ作成することによって、 "表示/消滅"を達成することができますが、ループで10個の関数を作成することをお勧めします。次のコードは、各チェックボックスが変更時に可変関数を呼び出す方法を示しています（例：t0Disp（））。

<? 
for ($row = 0; $row <10; $row++) 
{ 
    $topic = $topic[$row]; 
    ?> 
    <input id="C<? echo $row ?>" type="checkbox" value="true" onchange="t<? echo $row ?>Disp()" /><? echo $topic ?> 
    <br /> 
    <div id="<? echo $row ?>div" style="display: none"> 
     <? for ($col = 0; $col < 4; $col++) 
    { 
     ?> 
     <input type="radio" name="r<? echo $row ?>" value="<? echo $col ?>" onchange="disable<? echo $col ?>(); disable<? echo $row ?>();" /> 
     <? echo $col+1; ?> 
    <? 
    } 
    ?> 
     <br /> 
     <br /> 
    </div> 
<? 
} 
?> 

上記のコードは、手動でt0Disp（）からt9Disp（）関数を入力すると問題なく動作します。私は、機能だけで私はちょうどjavascriptのループがちょうどで10個の異なる機能を吐き出すしない理由を理解する必要が

for (var i=0; i<10; i++) { 
    var idiv = i + "div"; 
    var eldiv = document.getElementById(idiv); 
    var ci = "C" + i; 
    var elci = document.getElementById(ci); 
    window['t' + i + 'Disp'] = function() { 
     if(elci.checked == true) { 
      eldiv.style.display = "inherit"; 
     } 
     else { 
      eldiv.style.display = "none"; 
     } 
    } 
} 

（）t9Dispの作品（下記）これらの関数を作成するためのループを作ってみました場合には私のPHPループが10個の異なるチェックボックスを吐き出す方法？

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

Answer 1

あなたは複数の機能を必要としません。引数を持つ1つの関数だけがあなたのためにできます！

function disp(elci, eldiv) { 
    eldiv = document.getElementById('eldiv'); 
    if (elci.checked == true) { 
    eldiv.style.display = "inherit"; 
    } else { 
    eldiv.style.display = "none"; 
    } 
} 

そして、あなたのマークアップになります。

<input id="C<? echo $row ?>" type="checkbox" value="true" onchange="Disp(this,'<? echo $row ?>div')" /><? echo $topic ?> 

Answer 2

あなたの問題はあなたがは、10個の異なる機能を得るかのでvarが、掲揚されていることで、1 でそれぞれ1つのポインティングは、チェックボックスの最後のセットを指し変数を...共有しました。

問題へ最初ソリューションは、（あなたが唯一の近代的なブラウザをサポートする必要がある場合）letまたはconstを使用することです：

for (var i=0; i<10; i++) { 
    const idiv = i + "div"; 
    const eldiv = document.getElementById(idiv); 
    const ci = "C" + i; 
    const elci = document.getElementById(ci); 
    window['t' + i + 'Disp'] = function() { 
     if(elci.checked == true) { 
      eldiv.style.display = "inherit"; 
     } 
     else { 
      eldiv.style.display = "none"; 
     } 
    } 
} 

しかし、さらに多くのあなたができることがあります：

const checkboxes = document.querySelectorAll('.js-showChoices'); 
[].slice.apply(checkboxes).forEach(checkbox => { 
    checkbox.addEventListener('change', event => { 
    if (event.target.checked) getDivFor(event.target).style.display = 'inherit'; 
    else getDivFor(event.target).style.display = 'none'; 
    }); 
}); 

function getDivFor(checkbox) { 
    // Find div based on checkbox and return it 
} 

Answer 3

あなたのコードに問題が機能が追加されますとき、それらは変数eldi、elciの最後の値を覚えているということです。

変数の適切な値を記憶するためにクロージャを使用することができます。そのために はショーンがconstsよりも、それを行うための簡単な方法だろうと以前のブラウザ

for (var i=0; i<10; i++) { 
    window['t' + i + 'Disp'] = (function() { 
     var idiv = i + "div"; 
     var eldiv = document.getElementById(idiv); 
     var ci = "C" + i; 
     var elci = document.getElementById(ci); 

     return function() { 
      if(elci.checked == true) { 
       eldiv.style.display = "inherit"; 
      } else { 
       eldiv.style.display = "none"; 
      } 
     }; 
    })(); 
} 

JsFiddle

この作品をサポートする権利かかわらず問題があり、この

function addFunction(name, elementDiv, elementCi) { 
    window[name] = function() { 
    if(elementCi.checked == true) { 
     elementDiv.style.display = "inherit"; 
    } 
    else { 
     elementDiv.style.display = "none"; 
    } 
} 

} 

for (var i=0; i<10; i++) { 
    var idiv = i + "div"; 
    var eldiv = document.getElementById(idiv); 
    var ci = "C" + i; 
    var elci = document.getElementById(ci); 
    addFunction('t' + i + 'Disp', eldiv, elci); 
} 

Answer 4

ような何かを行います返された関数だけがアクセス可能な最初の関数の内部に変数をスコープで格納します。

レーヨンは、ループされた関数より優れた解決策を持っていますが、与えられた行を処理できる関数は、必要に応じて拡大または縮小することを意味します。