jQuery：获取数据属性答案

【问题标题】：jQuery: get data attributejQuery：获取数据属性
【发布时间】：2014-06-28 19:29:21
【问题描述】：

在我的 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 中），但是，我试过了。
它奏效了！

谁能解释一下原因？

【问题讨论】：

$(this).data('fulltext') 将在属性小写时起作用。但实际上，您应该将其设置为：data-fulltext 或 data-full-text。对于后者，则：$(this).data('fullText') 可以使用，使用驼峰式语法
仅供参考，I know that .attr() is deprecated attr() 未被弃用，这是用于设置/获取属性的方法，而不是属性
那么我应该使用什么 - prop 或 attr？
在您的情况下，请改用data()，但您应该重写此属性以使用：data-fulltext="This is a span element"

标签： javascript jquery html custom-data-attribute

【解决方案1】：

您可以使用.attr() 函数：

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

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

data-fulltext="This is a span element"

那么你可以使用.data()函数：

$(this).data('fulltext')

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

【讨论】：

太好了，那么您所要做的就是将属性名称小写，因为 .data 函数就是这样工作的，并且它希望您的属性被命名。
谢谢，它工作得很好！我现在不认为data- 应该只有小写字母:)
以防万一有人遗漏数据 - 仅使用小写字母 --- 很好！
我应该警告你，如果你使用 .data('attr', value) 更改值，你只能使用 .data() 检索它，使用 .attr() 会给你值仅存储在 DOM 上，不会通过调用 .data 的 setter 来更新。
我更喜欢语法：$(this).data().fulltext。通常一个元素有多个数据属性，因此创建一个指向数据对象的局部变量通常很有用，这样就不必每次都遍历对象树，例如var data = $(this).data();，然后在代码中使用该局部变量依次读取每个属性，例如var name = data.name, var age = data.age.

【解决方案2】：

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/

【讨论】：

stackoverflow.com/questions/15070277/…

【解决方案3】：

这对我有用

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

【讨论】：

【解决方案4】：

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

【讨论】：

问题是关于数据属性，与选择或任何其他形式的输入无关。
这个例子也是关于数据属性的。再读一遍！
哦，我明白了。如果您使用问题中的静态跨度来说明您的答案，而不是使用输入字段，也许会更清楚。那把我扔了。对不起。
这对我有用，您的解决方案非常简单

【解决方案5】：

这是我想出的：

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

【讨论】：