jQuery:获取数据属性

时间:2014-05-11 11:30:49

标签: javascript jquery html custom-data-attribute

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

然后我搜索并找到了以下问题:How to get the data-id attribute?jquery can't get data attribute value 这两个答案都是"Use .attr('data-sth') or .data('sth')" 我知道.attr()已被弃用(在我使用的jquery-1.11.0中),但是,我试过了。 它工作了!

有人可以解释原因吗?

5 个答案:

答案 0 :(得分:131)

您可以使用.attr()功能:

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

小写属性名称:

data-fulltext="This is a span element"

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

$(this).data('fulltext')

.data()函数需要并且仅适用于小写的属性名称。

答案 1 :(得分:4)

<强> 1。试试这个: .attr()

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

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

答案 2 :(得分:1)

这对我有用

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

答案 3 :(得分:0)

根据需要更改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/

答案 4 :(得分:0)

这就是我提出的:

		$(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>