JQuery. Data возвращает "неопределенный - PullRequest
Новая
       8

JQuery. Data возвращает "неопределенный

0 голосов
/ 19 января 2019

Я посмотрел другие посты и их решения не помогли.

Мой 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);
});

Я также пробовал без "е", как в: 

function(e) {

стал 

function() {

В каждом случае яполучить "неопределенный".Из всех моих исследований я не могу понять, в чем проблема.

Спасибо, Ричард Белотт

Ответы [ 2 ]

0 голосов
/ 19 января 2019

Вы были действительно близко.

При использовании .data() в jQuery он обрабатывается немного по-другому.

При использовании:

$(.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>
0 голосов
/ 19 января 2019

Do 

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

Неверное имя класса, которое прикреплено к прослушивателю событий, в классе btn-group отсутствует атрибут data-button-type.

...