获取数据属性

在我的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中），但是，我尝试了它。
它工作！

有人可以解释为什么吗？

来源

2014-05-11 Al.G.

'$（本）。数据（ '全文'） '会工作，因为属性较低。但的确，你应该把它设置为：'data-fulltext'或'data-full-text'。对于后面的，那么：'$（this）.data（'fullText'）'会使用骆驼case syntax –

FYI，'我知道。不推荐使用attr（）attr（）不被弃用，这是用来设置/获取属性的方法，而不是属性 –

那么我应该用什么 - 'prop'或'attr'？ –

118

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

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

，或者如果你小写属性名称：

data-fulltext="This is a span element"

，那么你可以使用.data()功能：

$(this).data('fulltext')

.data()函数仅适用于小写属性名称。

来源

2014-05-11 11:34:12

好，那么你所要做的就是小写你的属性名称，因为这是.data函数是如何工作的以及它如何期望你的属性被命名。 –

谢谢，它完美的作品！我现在没有'data-'应该只有小写字母:) –

由于小写字母限制，你不是第一个也不是最后一个卡住未定义数据的人。 –

1.尝试这样： .attr（）

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

DEMO 1：http://jsfiddle.net/hsakapandit/Jn4V3/

2.尝试这样：。数据（）

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

DEMO 2：http://jsfiddle.net/hsakapandit/Jn4V3/1/

来源

2014-05-11 11:43:47 mrdeveloper

http://stackoverflow.com/questions/15070277/why-jquery-1-9-attr-method-not-deprecated – mrdeveloper

这对我的作品

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

来源

2015-04-26 15:06:42

改变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/

来源

2016-08-20 07:16:39 curiousBoy

问题是关于数据属性，而与选择或任何其他形式的输入无关。 –

这个例子也是关于数据属性的。再读一遍！ – curiousBoy

哦，我明白了。如果你用问题中的静态范围说明你的答案，而不是使用输入字段，那么它可能会更清晰。那扔了我。抱歉。 –

这是我想出了：

\t \t $(document).ready(function(){ 
 
\t \t 
 
\t \t $(".fc-event").each(function(){ 
 
\t \t 
 
\t \t \t console.log(this.attributes['data'].nodeValue) \t 
 
\t \t }); 
 
    
 
    });

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

来源

2017-09-23 08:50:29 gsam01

获取数据属性

回答

相关问题