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>

我希望得到data-value点击的<a>控件，其中包含相同的ID。

我尝试了这段代码。但没有工作。

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

这是我的fiddle

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>

Answer 2

使用$('[id="catedit"]')

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

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<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>

jsfiddle

Answer 3

我认为这应该可以解决问题。

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

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

3 个答案: