在jQuery Mobile中更改數據圖標？

Question

我在網上發現了一堆解決方案，但他們都沒有爲我工作。基本上，我想切換一個按鈕的圖標。這裏的HTML：

<div data-role="navbar" data-iconpos="top"> 
    <ul> 
     <li><a data-icon="arrow-u">View suggestions</a></li> 
    </ul> 
    </div> 

我嘗試了所有的這些：

$(this).buttonMarkup({ icon: 'arrow-u' }); 

//

$(this).attr('data-icon','arrow-u'); 
$(this).children().children().next().removeClass('ui-icon-arrow-d').addClass('ui-icon-arrow-u'); 

//

$(this).jqmData('icon','arrow-u'); 

然而，出於某種原因，孩子上述任何一個按鈕的元素都會消失運行（jQuery Mobile在按鈕內部添加了一堆<span>）。

Answer 1

我發現這個問題！我用$(this).text('Hide suggestions')，它刪除了所有的子元素。我將其更改爲$(this).find('.ui-btn-text').text('Hide suggestions');，它現在完美運行！

Answer 2

試試這個：

$(this).attr('data-icon','arrow-u').button().trigger("refresh"); 

見相關論壇主題：http://forum.jquery.com/topic/how-dynamically-update-data-attributes

Answer 3

這些工作對我來說：

$("#yourButtonId .ui-icon").removeClass("ui-icon-gear").addClass("ui-icon-delete"); 

$(this).children("span").children(".ui-icon").removeClass("ui-icon-gear").addClass("ui-icon-delete"); 

$(this).find(".ui-icon").removeClass("ui-icon-gear").addClass("ui-icon-save"); 

我不知道女巫是最好的，最後我想。

Answer 4

做到這一點的最好辦法是：

$('#button').buttonMarkup({ icon: "home" });