使用动态参数设置onclick属性

set onclick attribute with dynamic arguments

本文关键字：onclick 属性 设置 参数 动态      更新时间：2023-09-26

我想使用JavaScript创建hrefs的动态列表，为此，每次用户单击带有不同参数的hrefBUT时，我都需要链接来执行一些函数。

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

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

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

如果不单独创建onclick处理程序，而是在for循环中创建a.onlick = myFunction(k);，则k将是每个a元素的for循环迭代中k的最后一个值（每个单击事件都将使用相同的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);
}

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

您可以使用事件委派来简化事件处理。

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

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

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>

相关文章：