Question

我想使用JavaScript创建href的动态列表，因为每次用户点击不同参数的href BUT时我都需要链接来执行某些功能。

代码：到目前为止我尝试的是这个！

    for(var k in LIST_OF_ARGUMENTS){
            var li = document.createElement("li");
            var a = document.createElement("a");
            a.setAttribute("href","#");
            // K here is the argument of myFunction 
            a.setAttribute("onclick","myFunction("+k+")")
            a.appendChild(document.createTextNode(k))
            li.appendChild(a);

Answer 1

以下代码将起作用，使k成为onclick事件的正确变量。

如果你没有单独创建onclick处理程序，而是在for循环中执行a.onlick = myFunction(k);，那么k将是for循环迭代中k的最后一个值。每个a元素（每个点击事件都会使用k的相同值触发相同的函数。）

function doClick(a, k) {
   a.onclick = function() {
      myFunction(k);
   }
};
for (var k in LIST_OF_ARGUMENTS) {
   var li = document.createElement("li");
   var a = document.createElement("a");
   doClick(a, k);
   a.setAttribute("href", "#");
   // K here is the argument of myFunct
   a.appendChild(document.createTextNode(k))
   li.appendChild(a);
}

Answer 2

<script>
  function myFunction(value) {
    alert(value);
  }
</script>

<ul id="my-list"></ul>

<script>
  var args = {
    a: 1,
    b: 2,
    c: 3
  };

  for (var arg in args) {
    var li = document.createElement('li');
    var a = document.createElement('a');
    a.setAttribute('href', '#');
    a.setAttribute('onclick', 'myFunction(' + args[arg] + ')');
    a.appendChild(document.createTextNode(arg));
    li.appendChild(a);
    document.getElementById('my-list').appendChild(li);
  }
</script>

Answer 3

您可以使用event delegation来简化事件处理。

ul.onclick = function(event) {
    event = event || window.event;
    var target = event.target || event.srcElement;
    // check here if it's your link 
    console.log(target.htef);
};

所以你的完整代码可能是这样的：

var args = [1,2,3,4,5,6,7,8],
    ul = document.querySelector(".list");

for (var k in args) {
    var li = document.createElement("li");
    var a = document.createElement("a");

    a.setAttribute("href", "#" + k);
    a.appendChild(document.createTextNode(k))
    li.appendChild(a);

    ul.appendChild(li);
}

ul.onclick = function(event) {
    event = event || window.event;
    var target = event.target || event.srcElement;

    console.log(target.htef);
};

JSFiddle

Answer 4

您的代码运行正常，您只是没有将节点附加到文档中。

＆＃13;

window.myFunction = function(val) {
  console.log('Clicked ' + val);
}
var LIST_OF_ARGUMENTS =  ['a','b', 'c', 'd'];
var ul = document.querySelector('ul');
// Shouldn't use `for in` with arrays, this is just 
for (var k=0; k < LIST_OF_ARGUMENTS.length; k++) {
  var li = document.createElement("li");
  var a = document.createElement("a");
  a.setAttribute("href", "#");
  // K here is the argument of myFunction 
  a.setAttribute("onclick", "myFunction(" + k + ")")
  a.appendChild(document.createTextNode(LIST_OF_ARGUMENTS[k]))
  li.appendChild(a);
  ul.appendChild(li)
}

＆＃13;

<ul></ul>

＆＃13;

使用动态参数设置onclick属性

4 个答案: