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元素中读取信息而不是第二个元素？

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

Here is a fiddle上面的代码。我正在使用jQuery 2.1。

Answer 1

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

.data(key)

返回指定数据存储区中第一个元素的值 jQuery集合，由数据（名称，值）或HTML5数据设置 - * 属性。

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

之类的东西

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

演示：Fiddle

读取数据属性=未定义？

1 个答案: