Javascript/html、动态 div、来自 2d 数组的单个 href？

Question

我对 C# 的 javascript 很陌生，但遇到了一些麻烦。我编写这个函数是为了让在我的网站上添加菜单更容易一些。它工作得很好，除了我似乎无法给我的 div 一个单独的 url，即使我可以给他们一个单独的 innerHtml。

我一直在尝试不同的东西，例如 divs[i].location.url 等，但我似乎没有任何工作。我当前的解决方案有每个 div 链接到/contact.html ，我对此有点困惑。

function DrawMainMenu() {
    var btns = [
        ["About", "/about.html"],
        ["Portfolio", "/portfolio.html"],
        ["Resume", "/resume.html"],
        ["Contact", "/contact.html"]
    ];
    var numOfBtns = btns.length;
    var divs = new Array(numOfBtns);
    for (var i = 0; i < numOfBtns; i++) {
        divs[i] = document.createElement("div");
        divs[i].className = "menuBtn";
        divs[i].innerHTML = btns[i][0];
        divs[i].style.height = (30 / numOfBtns) + "%";
        divs[i].style.lineHeight = 3.5;
        var link = btns[i][1];
        divs[i].addEventListener('click', function() {
            location.href = link;
        }, false);
        document.getElementById("buttons").appendChild(divs[i]);
    }
}

谢谢

Answer 1

问题是变量 link 在每次迭代时都会被覆盖，因此当事件处理程序获取 link 时，它是字符串 '/contact.html '，因为这是最后一次赋予它的值。

您可以尝试为元素设置onclick属性，这会将变量存储在属性onclick中。因此，它将具有旧的且正确的值。

function DrawMainMenu() {
    var btns = [
        ["About", "/about.html"],
        ["Portfolio", "/portfolio.html"],
        ["Resume", "/resume.html"],
        ["Contact", "/contact.html"]
    ];
    var numOfBtns = btns.length;
    var divs = new Array(numOfBtns);
    for (var i = 0; i < numOfBtns; i++) {
        divs[i] = document.createElement("div");
        divs[i].className = "menuBtn";
        divs[i].innerHTML = btns[i][0];
        divs[i].style.height = (30 / numOfBtns) + "%";
        divs[i].style.lineHeight = 3.5;
        var link = btns[i][1];
        divs[i].setAttribute('onclick', 'location.href = "' + link + '"');
        document.getElementById("buttons").appendChild(divs[i]);
    }
}
DrawMainMenu();

<div id="buttons"><div> 

更新答案

这里我们使用了闭包。使用闭包(关闭 link 的值)，我们将值绑定(bind)到点击处理程序的范围。

function DrawMainMenu() {
  var btns = [
    ["About", "/about.html"],
    ["Portfolio", "/portfolio.html"],
    ["Resume", "/resume.html"],
    ["Contact", "/contact.html"]
  ];
  var numOfBtns = btns.length;
  var divs = new Array(numOfBtns);
  for (var i = 0; i < numOfBtns; i++) {
    (function() {
      divs[i] = document.createElement("div");
      divs[i].className = "menuBtn";
      divs[i].innerHTML = btns[i][0];
      divs[i].style.height = (30 / numOfBtns) + "%";
      divs[i].style.lineHeight = 3.5;
      var link = btns[i][1];
      document.getElementById("buttons").appendChild(divs[i]);
      divs[i].addEventListener('click', function() {
        location.href = link;
      }, false);
    }());
  }
}
DrawMainMenu();

<div id="buttons"><div>