JavaScript傳遞變量到內部點擊功能不起作用

Question

我似乎無法弄清楚這一點。它的工作正常的第一部分爲循環，但然後該變種在內部點擊功能丟失，我評論它在哪裏打破...

另外，可能有一個更清潔的方式來寫它開始：

$(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()時間提醒4，變量c的值爲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; 
    } 
);