javascript - 在内联函数中获取属性 data-* 的值

Question

我有一个数据属性data-niq，我用它来存储一些数据。我想将 *-niq 中的数据传递给函数作为函数的第二个参数。

这是代码

<button onClick="editevent(this.id,this.id.getAttribute('data-niq'));" id="mid" data-niq="niq" class="mr edit btn btn-success pull-right"> Edit</button>

<script>
function editevent(clicked_id,attri_bute){
console.log('clicked id',clicked_id);
console.log('data-niq',attri_bute);
}
</script>

和链接https://jsfiddle.net/codebreaker87/zob8dm4z/8/

当我运行代码时，我得到TypeError: this.id.getAttribute is not a function

如何在我调用的内联函数中传递 data-niq 值？

Answer 1

这里有一些东西

1. 切勿将标记与 JavaScript 混合
2. 尝试在 javascript 端绑定(bind)事件。

检查以下代码片段。

window.onload = function() {

  var mid = document.getElementById("mid");
  mid.addEventListener('click', function() {
    editevent(this);
  })
}

function editevent(thisObj) {

  var id = thisObj.getAttribute('id');
  var dataniq = thisObj.getAttribute('data-niq');
  alert(id);
  alert(dataniq);
}

<button id="mid" data-niq="niq" class="mr edit btn btn-success pull-right">Edit</button>

希望对你有帮助