获取未定义的值 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);});当我点击desc时，它会显示一个警报，但问题是值是未定义的，我知道这是因为它说$（文档），但这是它工作的唯一方式......我想知道如何获取数据属性中的值？

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");