javascript - jQuery附加到元素

Question

我想要做的是，创建一个按钮并按下此按钮，它将更改我的 jQuery 移动测试站点上的主题颜色。

所以说我的 html 父 div 看起来像这样

<div id="firstPage" data-role="page">

我希望它在点击时附加data-theme="theme letter here" 到 div 以便它最终像这样<div id="firstPage" data-role="page" data-theme="theme letter here">

或者

如果我像这样启动 div<div id="firstPage" data-role="page" data-theme="theme letter here">按钮单击时，它会将 data-theme 属性更改为另一个字母

例如，像这样的东西

$('#themeBtn').click(function(){
        $('#firstPage').setAttribute("data-role","ANOTHER theme letter");   
    });

或者

$('#themeBtn').click(function(){
        $('#firstPage').append("data-role","a");    
    });

或类似的东西。我怎样才能正确地解决这个问题？

先谢谢了。

编辑*根据回复，我试过**

/////////////TESTING THEME BUTTON (check STACK OVERFLOW for answer)
$('#themeBtn').click(function(){
    //$('#firstPage').jqmData("role","a");
    //$('#firstPage').attr("data-theme","a");
    //$('#firstPage').jqmData("theme","a");
    $('#firstPage').data('theme','a');
});

为了确保按钮被触发，我将所有这些行注释掉并做了一个简单的

$('#themeBtn').click(function(){
    alert("foo");
    });

果然它在按钮点击时触发了警报，所以我肯定它的工作原理。（我的意思是按钮）。

我添加了一个 jsFiddle，所以你可以看到它在运行（不工作大声笑） http://jsfiddle.net/somdow/yRmKd/1/ 如果你取消注释警报，它会触发，当你取消注释其他行（根据回复）它不会更新。

Answer 1

您可以执行以下操作来设置属性：

   $('#themeBtn').on('click', function() {
  $('#firstPage').attr("data-theme", "new Theme");   
});

Answer 2

你有没有尝试过？

$('#themeBtn').click(function(){
    $('#firstPage').attr("data-role","ANOTHER theme letter");   
});

这应该更新数据角色

Answer 3

您可以使用jqmData方法：

$('#firstPage').jqmData('role', 'a');

文档

使用 jQuery Mobile 时，应使用 jqmData 和 jqmRemoveData 代替 jQuery 核心的 data 和 removeData 方法（注意这包括 $.fn.data、$.fn.removeData 和 $.data、$.removeData 和 $ .hasData 实用程序），因为它们会自动合并命名空间数据属性的获取和设置（即使当前没有使用命名空间）。

Answer 4

只需使用：$('#firstPage').data('theme', 'ANOTHER theme letter');