时间戳

首页 > 解决方案 > 点击 div 获取 data-id 的值

jquery - 点击 div 获取 data-id 的值

问题描述

我有以下 div：

     <div id="icon2323" data-id="2343434"  style="color: #0076c0;" data-toggle="collapse" data-target=".detail" class="fa fa-chevron-down"></div>

在我的查询代码中，我有以下内容：

         $('div[id^="icon"]').on('click', function (e) {
             alert('here'); 
             // var dataId = $(e).data("id"); did not work              
         });

我试过了：

  var dataId = $(e).data("id"); and tried to display the value but showed undefined.

我的问题是在这种情况下如何获取 data-id 的值。

标签： jquery

解决方案

只需使用 jQuery 的.data()方法：

$('div[id^="icon"]').on('click', function(e) {
  alert( $(this).data('id') );
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="icon2323" data-id="2343434" style="color: #0076c0;" data-toggle="collapse" data-target=".detail" class="fa fa-chevron-down">abc</div>

使用纯 JavaScript，您可以使用以下dataset属性：

var el = document.querySelector('div[id^="icon"]');
el.addEventListener("click", function() {
  alert(this.dataset.id);
}, false);
<div id="icon2323" data-id="2343434" style="color: #0076c0;" data-toggle="collapse" data-target=".detail" class="fa fa-chevron-down">abc</div>

推荐阅读