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-*属性由浏览器＆gt; JS转换处理，其处理方式与处理CSS名称相同 - 即：

删除了前导data-（上面提到的CSS名称比较中不需要的步骤）
- data-specialInfo变为specialInfo
- data-more-specialInfo变为more-specialInfo
剩余的attr名称将在-上拆分
- specialInfo变为[ specialInfo ]
- more-specialInfo变为[ more, specialInfo ]
所得到的分割部分中的第一个掉落到所有小写字母
- [ specialInfo ]变为[ specialinfo ]
- [ more, specialInfo ]变为[ more, specialInfo ]（没有变化，因为第一部分已经更低）
其余的分割部分被放到小写字母中，但是它们的第一个字母是大写的
- [ specialinfo ]变为[ specialinfo ]（没有变化，因为没有其他部分）
- [ more, specialInfo ]变为[ more, Specialinfo ]
现在案例修改的部分重新加入空字符串
- [ 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"));
});

使用jQuery的数据属性

4 个答案: