javascript - 使用 javascript 从锚标记获取自定义数据

Question

我正在尝试为 javscript 函数获取此值

<a href="#" id="like" name="like" data-value="<?php echo $_GET['id'];?> " onclick="like(); return false;">
                <img src="<?php echo $ROOT. "/assets/images/templates/like.png"?>" class="aligncenter" alt="" /></a>

我想获取作为数据值的 id。

我尝试过使用 jquery 选择器，var id = $('a[data-value]').attr();但显然它错了。

任何帮助表示赞赏。

Answer 1

纯 JavaScript 有 2 个变体：getAttribute()和dataset：

var el = document.getElementById( 'like' );
el.getAttribute( 'data-value' ); 
el.dataset.value;

当你也用 jQuery 标记它时，你可以使用data()or attr()：

$( '#like' ).data( 'value' );
$( '#like' ).attr( 'data-value' );

使用data()你只能读取值，但不能更新它！data()指的是一个 jQuery 数据对象，它只是用data-HTML 元素的字段初始化，但不更新它们！

Answer 2

jQuerydata()将获取数据属性（但不设置它）：

var id = $('#like').data('value');

或纯 JS

var id = document.getElementById('like').getAttribute('data-value');

Answer 3

使用.data()

var id= $('#like').data('value');

.data() 存储与匹配元素关联的任意数据

Answer 4

您需要使用data来检索数据属性：

var id = $('a[data-value]').data('value');

或者，假设a元素具有id：

var id = $('#like').data('value');

您可以使用attr()，但请注意，这只会获取data附加到 DOM 元素的属性，因此不被认为是好的做法。使用 jQuery 添加的数据属性只会出现在数据缓存中并且可以通过data()，因此无法通过这种方式检索：

var id = $('#like').attr('data-value');