读取数据属性=未定义？

Question

我的代码看起来像这样:

<ul class="effects-list">
   <li data-creative="1">Creative</li>
   <li data-uplifted="3">Uplifted</li>
   <li data-energetic="3">Energetic</li>
</ul>

然后Javascript读取数据属性:

$(function() {

  var effectData = $('.effects-list li');
  var creative = effectData.data("creative");
  var uplifted = effectData.data("uplifted");
  var energetic = effectData.data("energetic");

  console.log(creative);
  console.log(uplifted);
  console.log(energetic);

});

我在控制台日志中结束了这个:

1
undefined
undefined

为什么脚本在第一个li元素中读取信息而不是在后两个元素中读取信息？

我有什么问题,如何解决问题？

这是上面代码的小提琴.我正在使用jQuery 2.1.

Answer 1

由于您使用的是getter版本data(),因此它只会查看给定集合中的第一个元素,该元素没有所述数据属性.

.数据(键)

返回指定数据存储中jQuery集合中第一个元素的值,由数据(名称,值)或HTML5 data-*属性设置.

解决方案是使用属性存在选择器来定位正确的元素,然后获取数据值.就像是

var uplifted = effectData.filter('[data-uplifted]').data("uplifted");

演示:小提琴