使用动态参数设置 onclick 属性答案

【问题标题】：set onclick attribute with dynamic arguments使用动态参数设置 onclick 属性
【发布时间】：2016-01-14 12:59:44
【问题描述】：

我想使用 JavaScript 创建动态的 href 列表，因为每次用户点击带有不同参数的 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);

【问题讨论】：

你没听说过a.onclick = ...吗？还是a.addEventListener(...); 更好？不过记得锁定k的范围，否则它不会像你期望的那样工作。
@nietthedarkabsol 但 OP 正在创建一个字符串并将其设置为 onclick 字符串属性，k 在循环的每次迭代中创建不同的字符串。
@JuanMendes 是的，因此需要适当地确定k 的范围。
@farhawa 应该发布一个可以运行的示例，现在看起来它应该可以工作，即使您不应该通过属性设置处理程序
您可以将data-* attribute 设置为您的k 值，然后在您的myFunction 中访问它以获取您的值，而不是尝试创建多个onclick 值

标签： javascript html href

【解决方案1】：

下面的代码将起作用，使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);
}

【讨论】：

你说的是真的，但如果你将 onclick 设置为共享闭包的函数，这只是一个问题。 OP 没有在他们的处理程序中使用闭包，他们的处理程序是一个由浏览器评估的字符串

【解决方案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>

【讨论】：

【解决方案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

【讨论】：

【解决方案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)
}

&lt;ul&gt;&lt;/ul&gt;

【讨论】：