如何使用 jQuery 获取点击时自定义元素的值？

Question

这是我的html

<a href="#" data-value="val1" id="catedit">Link1</a>
<a href="#" data-value="val2" id="catedit">Link2</a>
<a href="#" data-value="val3" id="catedit">Link4</a>

我想要获得具有相同 id 的data-value单击控件。<a>

我尝试了这段代码，但不起作用。

$(document).ready(function() {
  $('#catedit').click(function() {
    var val = $(this).data('value');
    alert(val);
  });
});

这是我的小提琴

Answer 1

问题是因为您id在多个元素中重复了相同的属性，而这些元素应该是唯一的。结果，仅id选择第一个元素。

要解决此问题，请改用通用class属性：

$(document).ready(function() {
  $('.catedit').click(function() {
    var val = $(this).data('value');
    console.log(val);
  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<a href="#" data-value="val1" class="catedit">Link1</a>
<a href="#" data-value="val2" class="catedit">Link2</a>
<a href="#" data-value="val3" class="catedit">Link4</a>