更新回答

Question

我真的很喜欢C＃中的javascript而且我遇到了一些麻烦。我写了这个函数，使我的网站上的添加菜单更容易一些。它运作良好，除非我似乎无法给我的div个人网址，即使我可以给他们一个单独的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的值），我们将值绑定到单击处理程序的范围。

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>

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

1 个答案:

更新回答