使用动态参数设置 onclick 属性

Question

我想使用 JavaScript 创建 href 的动态列表，为此我需要 link 来在用户每次使用不同的参数单击 href 时执行一些功能。

代码：目前我试的是这个！

    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

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

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)
}

<ul></ul>

使用动态参数设置 onclick 属性

set onclick attribute with dynamic arguments

html

javascript

href