jQuery：获取数据属性

IT技术 javascript jquery html custom-data-attribute
2021-01-14 08:46:31

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

然后我搜索发现了这些问题：如何获取data-id属性？并且jquery 无法获取数据属性值。
两人的答案都是"Use .attr('data-sth') or .data('sth')"。
我知道这.attr()已被弃用（在我使用的 jquery-1.11.0 中），但是，我尝试了它。
它奏效了！

有人可以解释为什么吗？

5个回答

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

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

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

data-fulltext="This is a span element"

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

$(this).data('fulltext')

该.data()函数需要并仅使用小写的属性名称。

太好了，那么您所要做的就是小写您的属性名称，因为这是 .data 函数的工作方式以及它期望您的属性命名的方式。
2021-03-15 08:46:31
万一有人错过了数据 - 只使用小写 --- 很好！
2021-03-22 08:46:31
谢谢，它完美地工作！我现在不data-应该只有小写字母:)
2021-03-23 08:46:31
我应该警告您，如果您使用 .data('attr', value) 更改值，则只能使用 .data() 检索它，使用 .attr() 只会为您提供存储在 DOM 上的值，该值不是' t 通过调用 .data 的 setter 进行更新。
2021-04-02 08:46:31
我更喜欢语法：$(this).data().fulltext。通常一个元素上有多个数据属性，因此创建一个指向数据对象的局部变量通常很有用，这样就不必每次都遍历对象树，例如 var data = $(this).data ();，然后在代码中使用该局部变量依次读取每个属性，例如 var name = data.name, var age = data.age。
2021-04-07 08:46:31

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/

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

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

这对我有用

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

这就是我想出的：

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

其它你可能感兴趣的问题
上一篇Javascript 中 new Boolean() 的目的是什么？ 下一篇设置 iframe 的内容