如何在href中传递对当前对象的引用?

时间:2018-04-25 20:26:06

标签: javascript

我需要传递对href标记中点击的当前元素的引用。

考虑在创建表时循环进入的代码

td=document.createElement("td");
td.innerHTML='<a href="javascript: some_function(this,row_number,'extra_param')">click me</a>';

this不起作用,因为它指向浏览器窗口,因此当我将其设置为某个内容时,整个页面将替换为我设置的值。那么如何将<a>对象的引用传递给some_function()

其中some_function()被声明为:

function some_function(clicked_object,param2,param3) {
    clicked_object.style.backgroundColor="red"
}

1 个答案:

答案 0 :(得分:1)

这是一个完全成熟的解决方案,可以避免使用内联代码:

&#13;
&#13;
for (var i = 0; i < 10; i++) {
  // create elements
  let td = document.createElement("td");
  let a = document.createElement("a");
  a.innerHTML = `cell #${i}`;
  a.href = ""; // we need this so <a> appears as link
  // set click handler
  a.addEventListener("click", some_function);
  // add some data
  a.dataset.rowNumber = 1;
  a.dataset.extra = i * 2 + 7;
  td.appendChild(a);
  row.appendChild(td);
}

function some_function(e) {
  e.preventDefault(); // stop default event handling
  let clicked_object = e.target;  // get clicked element from event
  clicked_object.style.backgroundColor = "red";
  console.log("param:", clicked_object.dataset.extra);
}
&#13;
<table>
  <tbody>
    <tr id="row"></tr>
  </tbody>
</table>
&#13;
&#13;
&#13;

编辑:向元素添加数据