Question

我查看了很多问题，但无法弄清楚：

我和一些JS混在一起。

我有一个表单字符计数器的配置数组，如：

var charwatch = [
  {key: 'headline', value: 60}, 
  {key: 'subheading', value: 40}
];

它代表我想要观看的所有字段ID，以及相应的最大字符数。

实际的字符计数器/限制器工作正常 - 我遇到的问题是提供上述数据。

我试图遍历该配置并在每个循环中执行一个函数，每次都传递键和值。

for(p in charwatch) {

  element = charwatch[p].key;
  jq-element = '#'+element;
  count = charwatch[p].value;

  $(jq-element).keyup(function() {
    check_max_chars(element, count); // external function   
    console.log(element);
  });
}

它有点工作，但我发现console.log（元素）（在.keyup函数中）始终是“subheading”，从不“标题”。因此，一切都与子标题字段完全一样，但对于标题字段完全没有。

Answer 1

您遇到了一个常见问题，即变量正在变化，当您稍后尝试引用它时，它是最后一个参考，简单示例：

for(var i=0; i<10; i++){
    $('#div-' + i).bind('click', function(){ alert(i); }) // will always be 10
}

您需要将内部代码包装在函数中，以便创建一个保存变量值的新范围：

for(var p in charwatch){
    (function( element, count ){
        var jq-element = '#' + element;
        ...
    })( charwatch[p].key, charwatch[p].value );
}

或者你可以绑定一个闭包：

$(jq-element).keyup(function( element, count ){
    return function() {
        check_max_chars(element, count); // external function   
        console.log(element);
    }
}( element, count ));

或者，您可以将函数包装在with块中，这也会创建一个闭包。但是，JS strict mode或ES5（即未来的JavaScript版本）不支持此功能：

for(p in charwatch) {
    with({ element : charwatch[p].key, count : charwatch[p].value }){
       // existing code
    }
}

Answer 2

试试这个：

$.each(charwatch , function(a, b){
    $("#" + b.key).keyup(function() {     
        check_max_chars(b.key, b.value); // external function        
        console.log(b.key);   
    }); 
})

javascript循环遍历数组并访问key：value

2 个答案: