在JQueryMobile中动态更改按钮数据主题

Question

我在动态更改按钮主题时遇到了一些问题。从不同的文章中，我学会了使用方法：

<input type="button" data-inline="true" data-mini="true" data-theme="c" id="my-button" value="Save"> 
<script> 
$("#my-button").buttonMarkup({ theme: 'a' }).button('refresh'); 
</script> 

技术上这个作品，直到我鼠标 - 然后按钮回落到数据主题为“C”。有没有更好的方式来动态更改主题？

Answer 1

如果你使用一个按钮，如下

<a href="#" id="my-button2" data-role="button" data-theme="e">Save2</a> 

您可以更改主题如下

$('#my-button2').attr("data-theme", "c").removeClass("ui-btn-up-e").addClass("ui-btn-up-c"); 

退房这里现场小提琴http://jsfiddle.net/mayooresan/jfDLU/

Answer 2

我试图找到答案这个，但是在研究DOM结构之后提出了这个解决方案。我创建了下面的功能来点击按钮来切换主题。悬停类只有在更改您点击的同一个按钮的主题时才需要解决。 这些似乎适用于输入类型按钮元素。 （jqm版本1.3.2）

function changeButtonTheme(buttonSelector,toTheme){ 
    var currentTheme = $(buttonSelector).attr('data-theme'); 
    var parent = $(buttonSelector).parent(); 
    $(buttonSelector).attr("data-theme", toTheme).removeClass("ui-btn-up-"+currentTheme).addClass("ui-btn-up-"+toTheme); 
    parent.attr("data-theme", toTheme).removeClass("ui-btn-up-"+currentTheme).addClass("ui-btn-up-"+toTheme); 
    //parent.removeClass("ui-btn-hover-"+currentTheme).addClass("ui-btn-hover-"+toTheme); 
}