jQuery .data()返回undefined问题求助，多种尝试方案无效

嘿Richard，我一眼就看到问题所在啦！你的所有jQuery代码都是在尝试获取按钮元素的data-button-type属性，但你看你的HTML：这个属性根本不在按钮上，而是在下面的.grid-item元素里😅。另外你之前的代码里还有个小笔误——$('buttn')把button拼错了，少了个字母o，这也会导致代码失效。

下面分两种常见的需求场景给你解决方案：

场景1：你本来想给按钮添加data-button-type属性 #

如果你的目标是点击按钮时直接获取按钮自身的data-button-type，那先修改你的HTML，把属性加到按钮上：

<div class="btn-group">
  <button type="button" class="btn btn-default" data-button-type="interior">1</button>
  <button type="button" class="btn btn-default" data-button-type="exterior">3</button>
</div>
<div class="grid-item grid-item-double-height item-1" data-button-type="interior">
  <a href="#">
    <img src="img/lazyload-ph.png" data-src="img/slurp-004.jpg" class="img-responsive lazyload"/>
  </a>
</div>

然后用这段简洁的jQuery代码就能正常获取属性值了：

$(".btn-group").on('click', 'button', function() {
  var push = $(this).data("button-type");
  alert(push);
});

场景2：你想点击按钮后，获取对应.grid-item的data-button-type #

如果你的需求是按钮和.grid-item关联（比如按钮显示的数字1对应.item-1），那可以通过按钮的标识找到对应的网格项，再获取它的属性：

$(".btn-group").on('click', 'button', function() {
  // 从按钮的文本内容里拿到数字（比如按钮上的"1"、"3"）
  var btnIdentifier = $(this).text().trim();
  // 找到对应的grid-item元素
  var targetGridItem = $(".item-" + btnIdentifier);
  // 获取目标元素的data-button-type值
  var push = targetGridItem.data("button-type");
  alert(push);
});

这种方式不需要修改按钮的HTML，只要保持按钮文本和网格项的item-*类名对应就行。

内容的提问来源于stack exchange，提问作者belotte