JavaScriptが内部クリック機能に変数を渡すことができません

Question

私はこれを理解できないようです。それは

プラス、それはそもそも書くためのクリーンな方法は、おそらくあります...ループための最初のセクションのために正常に動作していますが、その後、VARは、それが壊れる私がコメントしインナークリック機能に失われます：ここでは

$(function() { var a = "rgb(58,88,90)"; var b = "rgb(123,156,158)"; for (var c = 1; c <= 3; c++) { if ($("#select" + c).is(":checked")) { $("#select" + c + "-icon").css("background", a); var d = document.getElementById("select" + c + "_title").innerHTML; $("#Selection_" + c).val(d) } else { $("#select" + c + "-icon").css("background", b); $("#Selection_" + c).val("Off") } $("#select" + c).click(function() { // here's where it stops working... var c is no longer recognized... if ($("#select" + c).is(":checked")) { $("#select" + c + "-icon").css("background", a); var d = document.getElementById("select" + c + "_title").innerHTML; $("#Selection_" + c).val(d) } else { $("#select" + c + "-icon").css("background", b); $("#Selection_" + c).val("Off") } }) } return false }); 

は、オブジェクトの最初のペアは、それがターゲットだ、次のとおりです。

<label for="select1"><aside id="select1-icon" class="icon-form right rounded"><img src="../common/images/icon-viewDemo.png" /></aside> 
       <input type="checkbox" id="select1" name="select" checked="checked" class="view" /> <h5 id="select1_title">Watch Demo</h5></label> 

そして：

<input type="hidden" id="Selection_1" name="Selection_1" value=""/> 

Answer 1

あなたはforループが終了したときに、変数cは、それが実行されるときに関数が見る値である値4を、持っている、あなたのループ変数をキャプチャしています。

var x; 
for (var c = 0; c <= 3; c++) { 
    x = function() { alert(c); }; 
} 
x(); 

これは、あなたがx()を呼び出す時点で、変数cが値4を持つ4に警告します。

変数自体ではなくcの値をキャプチャする場合は、各機能に別のコピーを付けることができます。私はハンドラを別のローカル関数に分割して読みやすくしています。

function createClickHandler(c) { 
    return function() { 
     if ($("#select" + c).is(":checked")) { 
      $("#select" + c + "-icon").css("background", a); 
      var d = document.getElementById("select" + c + "_title").innerHTML; 
      $("#Selection_" + c).val(d) 
     } else { 
      $("#select" + c + "-icon").css("background", b); 
      $("#Selection_" + c).val("Off") 
     } 
    } 
}; 
$("#select" + c).click(createClickHandler(c)); 

あなたはこの現象on this Web pageについてとthis earlier stackoverflow questionでより多くを学ぶことができます。

Answer 2

cはグローバルスコープに存在しないため、クリックすると存在しません。グローバルにした場合、クリックが発生したときに必要な値は得られません。したがって、eval（）を使用してください。 cをリテラル値に置き換えることで、クリックされたときに必要な値が得られます。

$(
    function() { 
     var a = "rgb(58,88,90)"; 
     var b = "rgb(123,156,158)"; 
     for (var c = 1; c <= 3; c++) { 
      if ($("#select" + c).is(":checked")) { 
       $("#select" + c + "-icon").css("background", a); 
       var d = document.getElementById("select" + c + "_title").innerHTML; 
       $("#Selection_" + c).val(d); 
      } else { 
       $("#select" + c + "-icon").css("background", b); 
       $("#Selection_" + c).val("Off"); 
      } 
      eval(
       '$("#select"' + c + ').click(function() {' + 
        'if ($("#select"' + c + ').is(":checked")) {' + 
         '$("#select"' + c + '"-icon").css("background", a);' + 
         'var d = document.getElementById("select"' + c + 
          '"_title").innerHTML;' + 
         '$("#Selection_"' + c + ').val(d)' + 
        '} else {' + 
         '$("#select"' + c + '"-icon").css("background", b);' + 
         '$("#Selection_"' + c + ').val("Off");' + 
        '}' + 
       '});' 
      ); 
     } 
     return false; 
    } 
);