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">

一样结束

OR

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

所以像这样的东西，比如

$('#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

您可以使用jqmData方法：

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

docs

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

Answer 2

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

Answer 3

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

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

Answer 4

你尝试过吗？

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

这应该更新数据角色

jQuery追加到元素

4 个答案: