javascript - 如何循环事件单击获取每个a的属性?
问题描述
我想获取点击事件data-id
的每个a属性的值onclick
,但是点击没有响应,也没有获取到每个属性的值。你有什么方法可以点击每个属性吗?
请看一下我的代码:
window.onload = function() {
var showClick = document.getElementById("showClick");
for (var i = 0; i < showClick.length; i++) {
(function(i) {
showClick[i].onclick = function(event) {
event.preventdefault()
alert(showClick.getAttribute("data-id"));
}
})(i);
}
}
<ul>
<li>
<a id="showClick" href="" data-id="1">dd</a>
</li>
<li>
<a id="showClick" href="" data-id="2">ee</a>
</li>
<li>
<a id="showClick" href="" data-id="3">gg</a>
</li>
<li>
<a id="showClick" href="" data-id="4">xx</a>
</li>
</ul>
解决方案
首先,所有id
属性必须是唯一的。改用通用类,例如:
<li>
<a class="showClick" href="" data-id="1">dd</a>
</li>
<li>
<a class="showClick" href="" data-id="2">ee</a>
</li>
.addEventListener()
使用附加click
事件会更好。
注意:dataset
当您处理data-* attributes
like时使用它会更有效:
this.dataset.id
获取data-id
属性。
window.onload = function() {
var showClick = document.querySelectorAll(".showClick");
for (var i = 0; i < showClick.length; i++) {
showClick[i].addEventListener('click', function(event) {
event.preventDefault();
console.log(this.dataset.id);
});
}
}
<ul>
<li>
<a class="showClick" href="" data-id="1">dd</a>
</li>
<li>
<a class="showClick" href="" data-id="2">ee</a>
</li>
<li>
<a class="showClick" href="" data-id="3">gg</a>
</li>
<li>
<a class="showClick" href="" data-id="4">xx</a>
</li>
</ul>
推荐阅读
- flutter - 如何在页面视图中嵌套列表视图
- r - 防止在 facet_wrap() 中重新排序
- azure - 关于 Azure 负载均衡器/Azure 流量管理器的问题
- python - 我在 python 中添加了脚本路径,Pycharm 说目录中没有 python
- java - 如何为 Spring Data Cassandra 创建自定义转换?
- c# - 用户不能更改复选框的检查状态。C# - 窗体
- python - 熊猫用相似的组数据填充缺失的单元格
- python-3.x - BeautifulSoup4,我如何抓取它的类?
- php - Htaccess 第二个重写规则不适用于生产
- mysql - 对于另一个表中的特定 ID,查找表中具有最高序列号的行