在 jQuery 中使用数据属性

Question

我有这个按钮：

<button type="button" class="themeChanger" data-themeValue="grid" value="Grid">
   <img src="templateImages/Icon_200.png" />                
</button>

还有这个 jQuery：

$(".themeChanger").click(function () { 
    alert($(this).attr("data-themeValue")); 
    alert($(this).data("themeValue")); 
});

由于某种原因，第一个警报应显示“网格”，但第二个显示未定义。我错过了什么愚蠢的东西吗？

Answer 1

我认为数据会显示为小写：alert($(this).data("themevalue")) //grid

或者如果你想使用themeValue你需要使用：

编辑：

我错了，它与小写无关，如果你有属性，你可以使用themeValue：data-theme-value 然后你用$(element).data("themeValue")调用它

<button class="themeChanger" data-themeValue="Theme1" data-theme-value="Theme2"></button>

$(".themeChanger").click(function() {
    var el = $(this);

    alert($(this).data("themeValue")); //Theme2
    alert($(this).data("themevalue")); //Theme1
});

Answer 2

如this Learning jQuery article 中所述，HTML5 的data-* 属性由浏览器处理->JS 转换的方式与处理CSS 名称的方式相同——即：

1. 前导data- 被移除（我在上面绘制的 CSS 名称比较中不需要这一步）
   • data-specialInfo 变为 specialInfo
   • data-more-specialInfo 变为 more-specialInfo
2. 剩余的 attr 名称在 - 上拆分
   • specialInfo 变为 [ specialInfo ]
   • more-specialInfo 变为 [ more, specialInfo ]
3. 生成的拆分部分中的第一个被删除为全部小写
   • [ specialInfo ] 变为 [ specialinfo ]
   • [ more, specialInfo ] 变为 [ more, specialInfo ]（没有变化，因为第一部分已经更低了）
4. 生成的拆分部分的其余部分被删除为小写，但它们的第一个字母变为大写
   • [ specialinfo ] 变为 [ specialinfo ]（没有变化，因为没有其他部分）
   • [ more, specialInfo ] 变为 [ more, Specialinfo ]
5. 现在大小写修改的部分在空字符串上重新连接
   • [ specialinfo ] 变为 specialinfo
   • [ more, Specialinfo ] 变为 moreSpecialinfo

在这种情况下，您的data-themeValue 属性可通过$(this).data("themevalue") 访问。而data-theme-value 属性可以通过$(this).data("themeValue") 访问。

除非您了解所使用的机制，否则这会非常令人困惑。

Answer 3

问题是骆驼案。为清楚起见，我会坚持使用 data-theme-value 格式的属性。

http://jsfiddle.net/NkHEx/2/

jquery 自动将.data('some-value') 转换为data('someValue')

请注意，两个警报调用都返回grid

Answer 4

我认为这里的问题是数据标签实现中连字符的驼峰式大小写

试试这个 jsfiddle - http://jsfiddle.net/FloydPink/fb6Y6/

<button type="button" class="themeChanger" data-theme-value="grid" value="Grid">
   data-theme-value                
</button>

<button type="button" class="themeChanger" data-themeValue="grid" value="Grid">
   data-themeValue
</button>

$(".themeChanger").click(function () {
    alert($(this).attr("data-themeValue"));
    alert($(this).data("themeValue"));
});