JQuery没有将正确的值附加到无序列表 [英] JQuery not appending correct value to unordered list

问题描述

function endGame(num) {
    var total = Object.keys(abvMap).length;

    $("#result").empty();

    if(num == total) {
        // you won
        $("#result").append("<h4>YOU WON!</h4><p>You got all " + total + " states!</p>");
    } else {
        console.log(states);
        // didn't get all 51 states
        $("#result").append("<h4>ALMOST!</h4><p>You got " + num + " out of " + total +" states!</p><h3>Missing states:</h3><ul id=\"missing-states-list\"></ul>");
        for(var key in abvMap) {
            if(($.inArray(key, states)) == -1) {
                console.log(key);
                $.get("https://api.census.gov/data/2013/language?get=EST,LANLABEL,NAME&for=state:" + abvMap[key] + "&LAN=625", function(data) {
                    $("#missing-states-list").append("<li><div class=\"tooltip\">" + key + "<span class=\"tooltiptext\">" + data[1][0] + " spanish speakers</span></div></li>");
                });
            }
        }
    }
}

这个文件的细节是无关紧要的。这里的问题是在for循环中，字典 abvMap 中的每个键都在循环中。 states 是一个全局数组，包含已经找到的状态，例如： states = [Maryland，Texas] 。 abvMap 是一个包含所有51个州的字典。我正在检查已经找到的 key 状态的for循环的每次迭代。如果没有，我进行API调用并将该状态（以及来自API的一些数据）附加到列表＃missing-states-list 。

The details of this file is irrelevant. The issue here is in the for-loop, where every key in the dictionary abvMap is being looped through. states is an global array that contains states that have already been found, e.g. states = ["Maryland", "Texas"]. abvMap is a dictionary that contains all 51 states. I'm checking in each iteration of the for-loop of the key state have already been found. If not, I make an API call and append that state (and some data from the API) to the list #missing-states-list.

通过 console.log（）输出来判断。 states 或 key 绝对没有问题，它完美地循环遍历字典中的每个状态。即使API调用也是正确的。但是，附加到＃missing-states-list 的内容始终是 Wyoming ，这是<$中的最后一个条目C $ C> abvMap 。我知道为什么。

Judging by the console.log() outputs. There's absolutely no issue with states or key, it perfectly loops through every state in the dictionary. Even the API calls are correct. However, what's appended to the #missing-states-list is always Wyoming, which is the last entry in abvMap. I have idea why.

推荐答案

问题原因：缺乏理解范围

选中此示例以了解问题：

Cause of the problem: lack of understanding scope

Check this example to understand the problem:

var funcs = []

for (var i = 0; i < 10; i++) {
  funcs.push(function() {
    console.log(i)
  })
}

funcs.forEach(function(func) {
  func()
})

虽然你可能期望这个 forEach 循环导致数字 0 到 9 正在打印，而不是你得到十倍 10 。原因是使用 var 关键字声明变量 i ，这会创建一个函数范围导致每个函数在 funcs 中持有引用到相同的 i 变量。在执行 forEach 循环时， -loop的前一个已结束且 i 持有10（上次迭代时为9 ++）。

While you might expect this forEach loop to result in number 0 to 9 being printed, instead you get ten times 10. The cause of this is the variable i being declared using var keyword, which creates a function scope that leads to each function in funcs holding a reference to the same i variable. At the time the forEach loop is executed, the previous for-loop has ended and i holds 10 (9++ from the last iteration).

比较ES6的让，创建块范围而不是函数范围，在这方面表现如下：

Compare how ES6's let, which creates block scope instead of function scope, behaves in this regard:

var funcs = []

for (let i = 0; i < 10; i++) {
  funcs.push(function() {
    console.log(i)
  })
}

funcs.forEach(function(func) {
  func()
})

因为让创建块范围， for 循环的每次迭代都有自己的变量 i 。

Because let creates block scope, each iteration of the for loop has its "own" variable i.

如果您需要ES5解决方案，则需要IIFE（ i 立即 i nvoked f 功能 e xpression）包装器将是最佳选择：

If you need an ES5 solution, an IIFE (immediately invoked function expression) wrapper would be the way to go:

var funcs = []

for (var i = 0; i < 10; i++) {
  funcs.push((function(value) {
    return function() {
      console.log(value)
    }
  }(i)))
}

funcs.forEach(function(func) {
  func()
})

此处， i 是作为参数传递给每个函数，该函数存储自己的副本值。

Here, i is passed as a parameter to each function which stores its own copy value.

var funcs = [],
  obj = {
    first: "first",
    last: "last",
    always: "always"
  }
  
for (var key in obj) {
  funcs.push(function() {
    console.log(key)
  })
}

funcs.forEach(function(func) { // outputs: "always", "always", "always"
  func()
})

同样， funcs 中的所有函数都持有引用到相同的键，因为 var key 创建一个函数sco pe住在 for..in 循环之外。再次，让产生您可能更期望的结果：

Again, all functions in funcs hold the reference to the same key because var key creates a function scope that lives outside of the for..in loop. And again, let produces the result you'd probably rather expect:

var funcs = [],
  obj = {
    first: "first",
    last: "last",
    always: "always"
  }
  
for (let key in obj) {
  funcs.push(function() {
    console.log(key)
  })
}

funcs.forEach(function(func) {
  func()
})

还要比较优秀的（！）书籍

Also compare the excellent (!) book

Nicholas C. Zakas：了解ES6，没有淀粉压榨，页。 8-9。

Nicholas C. Zakas: "Understanding ES6", no starch press, p. 8-9.

从中获取示例。

这篇关于JQuery没有将正确的值附加到无序列表的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！