获取数据属性

在我的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')); }); 

然后我search,发现这些问题: 如何获得data-id属性? 和jquery不能获得数据属性值 。
两者的答案是"Use .attr('data-sth') or .data('sth')"
我知道.attr()已被弃用(在我使用的jQuery-1.11.0),但是,我试过了。
它工作!

有人能解释为什么吗?

你可以使用.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); }); 

DEMO 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>