Javascript使用for-in循环迭代器来设置变量

Javascript using for-in loop iterator to set a variable

本文关键字：设置 变量 迭代器 循环 使用 for-in Javascript      更新时间：2023-09-26

我想动态创建一个按钮，该按钮将从对象中删除键。但是，在这一点上，我只是使用警报来测试正确的值，该值稍后将传递给将删除密钥的函数。我正在运行一个 for-in 循环，我正在尝试将迭代器传递给循环中调用的函数。问题是警报语句正在使用迭代器"i"，并且随着循环的结束，此警报的所有实例都已更改为最终值"i"。（我希望这是有道理的！

    locations = {};
function Location(nickname, address) {
    this.nickname = nickname;
    this.address = address;
}
Location.prototype.showLocations = function() {
    var x=document.getElementById("demo");
    output = "<table><tr><th>Location</th><th>Address</th><th>Delete</th></tr>";
    for (i in locations) (function(i)
    {
        output+=listThis(i);           
    }) (i);
    // for (i in locations) {
    //      output+=listThis(i);
    //     }
    output+="</table>"
    x.innerHTML=output;
}
function listThis(i){
    thisLoc = locations[i].nickname;
    var thisOutput="<tr><td>"+locations[thisLoc].nickname+"</td><td>"+locations[thisLoc].address+"</td><td><input type='button' value='X' onclick='alert(locations[thisLoc].nickname)' /></td></tr>";
    return thisOutput;
}
function enterLocation() {
    var address = document.getElementById('address').value;
    var nickname = document.getElementById('nickname').value;
    locations[nickname] = new Location(nickname, address);
    locations[nickname].showLocations();
}

标记为：

<p id="demo">Table to go in here.</p>
<div id="panel">
    <input id="nickname" type="textbox" placeholder="Location Name" />
    <input id="address" type="textbox" placeholder="Sydney, NSW" />
    <input type="button" value="Enter" onclick="enterLocation()" />
</div>

请注意，我已经尝试使用在这篇文章 Javascript 中找到的信息 - 如何在带有回调的 for 循环中使用迭代器，但没有成功。你会看到另一个 for 循环注释掉了我最初正在尝试的。

问题出在内联点击处理程序中。

你写onclick='alert(locations[thisLoc].nickname)'这里thisLoc不是对变量的直接引用。它是在运行时计算的某个名称。

在第thisLoc = locations[i].nickname;定义全局变量thisLoc，该值在每次迭代时被覆盖。稍后，当处理onclick时，将访问具有（始终）最新值的全局变量。

有几种解决方案：

  • 不要像minitech所说的那样使用HTML构建 - 使用DOM操作

  • 在构建时将值写入某个 DOM 属性并在onclick处理程序中读取它： 

    "<input type='button' value='X' data-location-name="' + thisLoc + '" onclick='alert(locations[this.getAttribute('data-location-name')].nickname)' />"

正如其他人所提到的，您需要正确限定变量的范围（即不使用全局变量）。

var locations = {};
function Location(nickname, address) {
    this.nickname = nickname;
    this.address = address;
}
Location.prototype.showLocations = function() {
  var x = document.getElementById("demo");
  var output = "<table><tr><th>Location</th>" +
        "<th>Address</th><th>Delete</th></tr>";
  for (var i in locations) {
    output += listThis(i);
  }
  output += "</table>";
  x.innerHTML = output;
};
function listThis(i){
  var thisLoc = locations[i].nickname;
  var thisAddr = locations[i].address;
  var thisOutput= "<tr><td>" + thisLoc + "</td><td>" + thisAddr +
      "</td><td><input type='button' value='X' onclick='alert('"" +
      thisLoc + "'")' /></td></tr>";
  return thisOutput;
}
function enterLocation() {
    var address = document.getElementById('address').value;
    var nickname = document.getElementById('nickname').value;
    locations[nickname] = new Location(nickname, address);
    locations[nickname].showLocations();
}

这是对更新代码的摆弄。

应该注意的是，此代码仍在将locations变量和所有函数添加到全局范围，这不是建议的做法。解决问题所需的唯一更改是修复函数中定义和使用的变量的范围。

相关文章：