Получение неопределенного значения jQuery и Html

Question

У меня есть этот HTML код:

<div class="cart-plus-minus">
  <input class="cart-plus-minus-box quantity" id="{{ $item->id }}" name="quantity[{{ $i }}]" value="{{ $item->quantity }}" type="text">
  <input  name="product_id[{{ $i }}]" value="{{ $item->id }}" type="hidden">
  <div class="dec qtybutton" data-attribute="{{ $item->id }}"><i class="zmdi zmdi-chevron-down"></i></div>
  <div class="inc qtybutton" data-id="{{ $item->id }}"><i class="zmdi zmdi-chevron-up"></i></div>
</div>

Мой jQuery код:

$(document).on('click', 'div.cart-plus-minus > div.dec', function (event) {
    var element = jQuery(event.currentTarget);
    var url = element.attr("attribute");
    alert(url);
});

Когда я нажимаю на des c, отображается предупреждение, но дело в том, что значение приходит undefined, и я знаю, что это потому, что он говорит $ (document), но это единственный способ, которым он работал ... Интересно, как я могу получить значение в атрибуте данных?

Спасибо!

Answer 1

• Для получения данных используйте .data("foo") или .attr("data-foo")

$(document).on('click', 'div.cart-plus-minus > div.dec', function (event) {
    var url = $(this).data("attribute");
    alert(url);
});

Пример:

$(document).on('click', 'div.cart-plus-minus > div.dec', function(event) {
  var url = $(this).data("attribute"); // That's not an URL but OK
  alert(url);
});

<div class="cart-plus-minus">
  <input class="cart-plus-minus-box quantity" id="888" name="quantity[0]" value="0" type="text">
  <input name="product_id[0]" value="888" type="hidden">
  <div class="dec qtybutton" data-attribute="888"><i class="zmdi zmdi-chevron-down"> DEC</i></div>
  <div class="inc qtybutton" data-id="888"><i class="zmdi zmdi-chevron-up"> INC</i> </div>
</div>

<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>

Учитывая пример из вашей ссылки, у вас есть что-то вроде этого:

$(".dec, .inc").on('click', function() {
  const $inp = $(this).closest('.cart-plus-minus').find('.cart-plus-minus-box');
  let val = Number($inp.val());
  val += $(this).is('.inc') ? 1 : -1; 
  $inp.val(Math.max(0, val));
});

<div class="cart-plus-minus">
  <input class="cart-plus-minus-box" name="quantity" value="1" type="text">
  <button type="button" class="dec qtybutton"><i class="zmdi zmdi-chevron-down">-</i></button>
  <button type="button" class="inc qtybutton"><i class="zmdi zmdi-chevron-up">+</i></button>
</div>

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>

Также исправьте проблемы с шаблонами.

Answer 2

Вы можете сделать что-то вроде этого:

$(document).on('click', 'div.cart-plus-minus > div.dec', function (event) {
    alert($(this).data('attribute'));
});

Answer 3

Используйте data () вместо attr:

element.data("attribute");