javascript - 如果有许多具有相同功能的div，如何使用函数调用div的属性值？

Question

我有以下代码:

function openCanviewer() {
    var cid = $(this).data('cid');
    alert(cid);
}

和 HTML:

<div onclick="openCanviewer();" data-cid="ID OF CAN FROM DATABASE"></div>

我的问题是，当我单击具有 onclick 函数的元素时，我有很多，因为它们是从数据库中插入的，警报只显示“未定义”而不是 data-cid 属性的内容。有人知道我做错了什么，或者我在这里遗漏了什么吗？

Answer 1

要捕获确切的元素，请从元素的点击事件处理程序传递 this

function openCanviewer(element) {
    var cid = $(element).data('cid');
    alert(cid);
}


<div onclick="openCanviewer(this);" data-cid="ID OF CAN FROM DATABASE"></div>
                       ^^^ you have a typo here

片段

function openCanviewer(element) {
  var cid = $(element).data('cid');
  alert(cid);
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<div onclick="openCanviewer(this);" data-cid="ID OF CAN FROM DATABASE">Click</div>