[英]jQuery: get data attribute
In my html I have a span
element: 在我的html中,我有一个
span
元素:
<span class="field" data-fullText="This is a span element">This is a</span>
And I want to get the data-fullText
attribute. 我想获取
data-fullText
属性。 I tried these two ways, but they didn't work (the both return undefined
): 我尝试了以下两种方法,但是它们不起作用(两者都返回
undefined
):
$('.field').hover(function () {
console.log('using prop(): ' + $(this).prop('data-fullText'));
console.log('using data(): ' + $(this).data('fullText'));
});
Then I searched and found these questions: How to get the data-id attribute? 然后我搜索并发现了以下问题: 如何获取data-id属性? and jquery can't get data attribute value .
和jQuery无法获取数据属性值 。
The both's answers are "Use .attr('data-sth') or .data('sth')"
. 两者的答案都是
"Use .attr('data-sth') or .data('sth')"
。
I know that .attr()
is deprecated (in jquery-1.11.0, which I use), but, however, I tried it. 我知道
.attr()
已被弃用(在我使用的jquery-1.11.0中),但是,我尝试了一下。
And it workded! 它奏效了!
Can someone explain why? 有人可以解释为什么吗?
You could use the .attr()
function: 您可以使用
.attr()
函数:
$(this).attr('data-fullText')
or if you lowercase the attribute name: 或如果您将属性名称小写 :
data-fulltext="This is a span element"
then you could use the .data()
function: 那么您可以使用
.data()
函数:
$(this).data('fulltext')
The .data()
function expects and works only with lowercase attribute names. .data()
函数应使用小写属性名称,并且只能与小写属性名称一起使用。
1. Try this: .attr() 1.试试这个: .attr()
$('.field').hover(function () {
var value=$(this).attr('data-fullText');
$(this).html(value);
});
DEMO 1: http://jsfiddle.net/hsakapandit/Jn4V3/ 演示1: http : //jsfiddle.net/hsakapandit/Jn4V3/
2. Try this: .data() 2.试试这个: .data()
$('.field').hover(function () {
var value=$(this).data('fulltext');
$(this).html(value);
});
DEMO 2: http://jsfiddle.net/hsakapandit/Jn4V3/1/ 演示2: http : //jsfiddle.net/hsakapandit/Jn4V3/1/
This works for me 这对我有用
$('.someclass').click(function() {
$varName = $(this).data('fulltext');
console.log($varName);
});
Change IDs and data attributes as you wish! 根据需要更改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"));
});
Here is the working example: https://jsfiddle.net/ed5axgvk/1/ 这是工作示例: https : //jsfiddle.net/ed5axgvk/1/
This is what I came up with: 这是我想出的:
$(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>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.