在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); 
}