获取数据属性

在 html 中，我有一个 span元素:

<span class="field" data-fullText="This is a span element">This is a</span>

我想得到 data-fullText属性。我试过这两种方法，但都不管用(两种方法都返回 undefined) :

$('.field').hover(function () {
console.log('using prop(): ' + $(this).prop('data-fullText'));
console.log('using data(): ' + $(this).data('fullText'));
});

然后我搜索并找到了这些问题: 如何获取 data-id 属性？和 Jquery 不能得到数据属性值。
这两个问题的答案都是 "Use .attr('data-sth') or .data('sth')"。
我知道 .attr()是不推荐的(在我使用的 jquery-1.11.0中) ，但是，我还是尝试了。
成功了！

有人能解释一下为什么吗？

189971 次浏览
小开
最佳答案

你可以使用 .attr()函数:

$(this).attr('data-fullText')

或者如果您 小写属性名称:

data-fulltext="This is a span element"

然后你可以使用 .data()函数:

$(this).data('fulltext')

.data()函数只能使用小写的属性名。

小开

1. 尝试这样做: . attr ()

  $('.field').hover(function () {
var value=$(this).attr('data-fullText');
$(this).html(value);
});

演示1: http://jsfiddle.net/hsakapandit/jn4v3/

2. 尝试这样做: . data ()

$('.field').hover(function () {
var value=$(this).data('fulltext');
$(this).html(value);
});

演示2: http://jsfiddle.net/hsakapandit/jn4v3/1/

小开

这对我有用

$('.someclass').click(function() {
$varName = $(this).data('fulltext');
console.log($varName);
});
小开

随意更改 ID 和数据属性！

  <select id="selectVehicle">
<option value="1" data-year="2011">Mazda</option>
<option value="2" data-year="2015">Honda</option>
<option value="3" data-year="2008">Mercedes</option>
<option value="4" data-year="2005">Toyota</option>
</select>


$("#selectVehicle").change(function () {
alert($(this).find(':selected').data("year"));
});

下面是工作示例: https://jsfiddle.net/ed5axgvk/1/

小开

这是我想到的:

		$(document).ready(function(){
		

$(".fc-event").each(function(){
		

console.log(this.attributes['data'].nodeValue)
});
    

});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<div id='external-events'>
<h4>Booking</h4>
<div class='fc-event' data='00:30:00' >30 Mins</div>
<div class='fc-event' data='00:45:00' >45 Mins</div>
</div>


提交答案