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; 
    } 
);