動態更改頁面更改上的標題按鈕圖標，jQuery mobile 1.4.5

Question

好的，這應該很簡單，但是似乎沒有任何作用...

 <div data-role="header" data-position="fixed" data-tap-toggle="false">
    <h1 class="ui-title" id="headertitle"></h1>
        <a class="ui-btn-left ui-nodisc-icon ui-btn-inline ui-mini" id="leftButton" onclick="alert('this');" data-icon="gear" data-iconpos="notext"></a>
 </div>

我已經在jQuery mobile中的頁面更改的顯示事件之前的頁面顯示，頁面創建和頁面中嘗試過以下操作：

$('#leftButton').data("icon", "grid");
$('#leftButton').jqmData("icon", "grid");
$('#leftButton').attr("data-icon", "grid");

似乎都不起作用。 那么，如何更改標題按鈕圖標以適合每個頁面？

Answer 1

jQuery mobile具有按鈕小部件以及樣式類似於按鈕的dom元素。 在您的情況下，錨僅是樣式設置，因此您可以簡單地切換類：

<a id="leftButton" href="#" class="ui-btn ui-icon-gear ui-btn-icon-notext ui-corner-all">No text</a>

$( "#leftButton" ).on("click", function(){
    $(this).removeClass("ui-icon-gear").addClass("ui-icon-grid");
});

如果要使用小部件，則可以在代碼（ http://api.jquerymobile.com/button/#option-icon ）中設置圖標選項：

<input id="btnWidget" type="button" data-icon="gear" data-iconpos="notext" value="Icon only" />

$( "#btnWidget" ).on("click", function(){
    $(this).button( "option", "icon", "grid" );
});

這是兩種技術的演示