Question

我看了其他帖子，他们的解决方案无济于事。

我的HTML是：

<div class="btn-group">
  <button type="button" class="btn btn-default 1">1</button>
  <button type="button" class="btn btn-default 3">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(e) {
  var push = $(this).data("button-type");
  alert(push);
});

和

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

和

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

我尝试了最后一个，因为我读到使用“ this”是指最外面的元素

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

和

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

我也尝试了不使用“ e”的情况，

function(e) {

成为

function() {

在每种情况下，我都会得到“未定义”。从我的所有研究中，我无法弄清楚问题出在哪里。

谢谢你，理查德·贝洛特

Answer 1

做

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

附加到事件侦听器的类名错误，使用的btn-group分类中没有data-button-type属性。

Answer 2

你真的很亲近。

在jQuery中使用.data()时，会有所不同。

使用时：

$(.someClass).data('myAttribute')

它由jQuery处理为：

<div class='.someClass' data-my-attribute></div>

对于您的情况：您可以像下面的代码一样使用它：

$(".btn-group").on('click', 'button', function(e) {
  //this points to the button clicked. So either you use the below code
  //or you should directly select the grid item.
  //This works too
  //var push = $('.grid-item').data("buttonType");
  var push = $(this).parent().siblings('.grid-item').data("buttonType");
  alert(push);
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.2/jquery.min.js"></script>
<div class="btn-group">
  <button type="button" class="btn btn-default 1">1</button>
  <button type="button" class="btn btn-default 3">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 .data返回“未定义

2 个答案: