Question

我正在尝试在点击完整密钥时提醒data-keyid。

$(function() {
    $('.fullkey').click( function (){
        var keyId = $(this).attr('data-keyid');
        alert(keyId);
    });

});

<div class="fullkey">
    <div data-keyid="c-key"></div>
</div>

Answer 1

使用.find获取父元素的子节点。您可以使用特定选择器过滤返回的元素集。在此示例中，$(this)是父选择器。

[data-keyid]选择器可用于查找属性为data-keyid

的子节点

试试这个：

＆＃13;

$(function() {
  $('.fullkey').click(function() {
    var keyId = $(this).find('[data-keyid]').attr('data-keyid');
    alert(keyId);
  });
});

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<div class="fullkey">
  <div data-keyid="c-key">Click Here</div>
</div>

<div class="fullkey">
  <div data-keyid="d-key">Click Here</div>
</div>

<div class="fullkey">
  <div data-keyid="e-key">Click Here</div>
</div>

＆＃13;

Answer 2

Codepen Demo

点击div

中的.fullkey

你只需在JS上添加$('.fullkey div')。

此处代码：

$('.fullkey div').click( function (){
        var keyId = $(this).attr('data-keyid');
        alert(keyId);
    });

Answer 3

你也可以试试这个：

$(this).data("keyid");

HTML 5使您能够添加自定义数据属性，其中每个属性名称以＆＃34; data - ＆＃34;开头。 JQuery允许使用data（）函数访问属性的值。

示例：。 data（）函数返回值=＆＃34; c-key＆＃34;。

Answer 4

当您点击.fullkey时，this的引用为.fullkey，但data-keyid是其子元素的属性，因此请使用find查找元素在它里面，然后得到它的属性。

$(document).ready(function(){
  $('.fullkey').click(function (){
        var keyId = $(this).find('div').attr('data-keyid');
        alert(keyId);
    });

});
$(function() {
  

});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.3/jquery.min.js"></script>
<div class="fullkey" style="bgcolor:black">
    <div data-keyid="c-key">Click</div>
</div>

Answer 5

请找到演示here。

<强> HTML：

<div class="fullkey">Click here
  <div data-keyid="c-key"></div>
</div>

<强> JS：

$(function() {
  $('.fullkey').click(function() {
    var keyId = $(this).find('div').attr('data-keyid');
    alert(keyId);
  });
});

点击事件的警报元素属性

5 个答案: