Javascript循环遍历数组并访问key: value

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函数)总是"副标题"，从来没有"标题"。因此，所有的工作都是正确的，因为它应该为子标题字段，但不是为标题字段。

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