Question

我正在尝试使用foor循环初始化一堆jquery函数。我在每次迭代中都使用for循环的计数器来在表中的一行上调用该函数。

但是它不起作用。我认为这是因为该函数中不存在计数器。这是因为我已经尝试对函数进行硬编码，例如应该将计数器应为0的位置运行，并且我的函数按预期在表的第0行上运行。当我将计数器放在适当的位置时，会引发错误，并说我通过ID获得的html元素为空。

有什么我想念的吗？如何将计数器传递给javascript函数？

这是我的代码：


  var typingTimer;                //timer identifier
  var doneTypingInterval = 400;  //time in ms (5 seconds)

var i

for (i = 0; i < 10; i++) {
  //on keyup, start the countdown
  $('#precios-'.concat(i,'-precio')).keyup(function(i){
      clearTimeout(typingTimer);
      if (document.getElementById('precios-'.concat(i,'-precio')).value) {
          typingTimer = setTimeout(doneTyping, doneTypingInterval);
      }
  });

  //user is "finished typing," do something
  function doneTyping(i) {
          var it = i
          $.getJSON('./_revisarCaptura', {
            unidades: $($($('#precios-'.concat(it,'-precio')).parents()[1]).siblings()[6]).html(),
            ultimoPrecio: $($($('#precios-'.concat(it,'-precio')).parents()[1]).siblings()[7]).html().substring(1),
            nuevoPrecio: document.getElementById('precios-'.concat(it,'-precio')).value,
            nuevasUnidades: document.getElementById('precios-'.concat(it,'-precio')).value,
          }, function(data) {

            $('#precios-'.concat(it,'-precio')).css('backgroundColor', data.result)
  })
  return false
}

i++

}

Answer 1

您的代码有两个问题：

keyup和doneTyping()函数将i声明为参数。它们在循环外shadow i变量。 keyup函数收到的keyup事件是i。
i不会在循环的每次迭代中捕获。到调用回调时，i将设置为10，而不是循环计数器。

以下代码解决了该问题。

var typingTimer;                //timer identifier
var doneTypingInterval = 400;   //time in ms (5 seconds)
// This i is changed by the loop.
// By the time doneTyping() is called, i will be 10.
var i;
for (i = 0; i < 10; i++) {
    // let/const keeps the variable scoped within the loop
    const id = `precios-${i}-precio`;
    const selector = `#${id}`;

    // This is also known as debounce
    $(selector).keyup(function(/* remove i */){
        clearTimeout(typingTimer);
        if (document.getElementById(id).value) {
            typingTimer = setTimeout(doneTyping, doneTypingInterval);
        }
    });

    function doneTyping(/* remove i */) {
        $.getJSON('./_revisarCaptura', {
            unidades: $($($(selector).parents()[1]).siblings()[6]).html(),
            ultimoPrecio: $($($(selector).parents()[1]).siblings()[7]).html().substring(1),
            nuevoPrecio: document.getElementById(id).value,
            nuevasUnidades: document.getElementById(id).value,
        }, function(data) {
            $(selector).css('backgroundColor', data.result)
        });
        return false; // Do you need this?
    }
}

另请参阅let vs. var。

如何将for循环的计数器传递给for循环中的函数

1 个答案: