javascript - jQuery 在内联 onclick 中传递对象

Question

如何将object传递给内联onclick事件。当我尝试以下代码时，我要么得到 undefined 要么 [object object]。

还有如何将点击事件绑定(bind)到 h 以避免内联代码。

this.get = function(o) {
  console.log(o, o.foo);
}

this.somefunction = function(robj) {
  for (var i = 0, i <= robj.length; i++) {
    var fname = robj[i]['filename']
    h += '<div class="checkbox checkbox-success" onclick="get(\'' + robj + '\')">' +
      '<input id="' + fname + '" type="checkbox" class="styled"> ' +
      '<label for="' + fname + '"><a data-fancybox-next class="button-next" href="#">' + fname + '</a></label>' +
      '</div>';
  }
}

Answer 1

我在您的代码中发现了一些问题，

1. 你的循环应该是i < robj.length并且有语法错误 ,应该是;
2. h未定义，但现在不再使用
3. 传入 get() 的数组无法使用 o.foo 访问

旁注:看看 ES6 template literals帮助清理您当前正在执行的一些引用操作，例如 id="' + fname + '"看起来像 id="${fname}"

这是一个完整的工作示例，其中包含上述修复，说明如何向 div 添加监听器(通过创建 DOM 元素)并将对象作为参数。

this.get = function(o) {
  console.log(o);
  console.log(o.foo);
}

this.somefunction = function(robj) {
  for (let i = 0; i < robj.length; i++) {
    var fname = robj[i]['filename']
    var myDiv = document.createElement("div");
    myDiv.className = "checkbox checkbox-success";
    myDiv.onclick  = function(){get(robj[i])};
    myDiv.innerHTML =
      '<input id="' + fname + '" type="checkbox" class="styled"> ' +
      '<label for="' + fname + '"><a data-fancybox-next class="button-next" href="#">' + fname + '</a></label>';
    document.getElementById("container").appendChild(myDiv);
  }
}
var robj = [{filename: "myFilename", foo: "myFoo"}]
somefunction(robj);

<div id="container"></div>