javascript - jQuery .each 没有返回每个项目的数据，因为它应该

Question

如果我为 .tile 的每个实例输出 next 和 prev 的值，它们会正确显示，但是当尝试使用它们来选择要加载到其容器中的页面时，它将使用Last 创建了 next 和 previous 的实例，而不是相关的实例。

我输入错了什么？

$(".tile").each(function(){
 var $this = $(this);
     container = $("#container");
     button = $this.find(".button")
     next = button.data("next");
     prev = button.data("prev");
     urls = ["i.html", "b/i.html", "p/i.html"]

 button.on({
  mousedown: function(){
   console.log(urls[next])
    container.empty().load(urls[next])
   }
  })
})

Answer 1

这是因为您没有将 next 和 prev 实例化为循环每次迭代的新变量。这意味着您的整个程序中总共存在 next 和 prev 的 1 个版本，并且您只需不断为其重新分配值即可。您创建的每个按钮监听器都将引用同一个 next 变量。在循环中使用 var 关键字:

$(".tile").each(function(){
     var $this = $(this);
     var container = $("#container");
     var button = $this.find(".button")
     var next = button.data("next");
     var prev = button.data("prev");
     var urls = ["i.html", "b/i.html", "p/i.html"]

     button.on({
      mousedown: function(){
       console.log(urls[next])
        container.empty().load(urls[next])
      }
     })
})