当我动态更改图标时,它不会反映页面上的更改,即使在标记中已更改。
示例:
<ul data-role="listview" data-autodividers="true" data-filter="true" data-inset="true">
<li data-icon="check"><a href="#">Adam Kinkaid</a></li>
<li data-icon="check"><a href="#">Alex Wickerham</a></li>
<li data-icon="check"><a href="#">Avery Johnson</a></li>
<li data-icon="check"><a href="#">Bob Cabot</a></li>
<li data-icon="check"><a href="#">Caleb Booth</a></li>
<li data-icon="check"><a href="#">Christopher Adams</a></li>
<li data-icon="check"><a href="#">Culver James</a></li>
</ul>
$("li").tap(function() {
//Alert the old icon
alert($(this).jqmData("icon"));
//Toggle
$(this).jqmData("icon") == "false" ? $(this).jqmData("icon", "check") : $(this).jqmData("icon", "false");
//Alert the new icon
alert($(this).jqmData("icon"));
});
我给你做了一个工作示例:http://jsfiddle.net/Gajotres/qgE6L/
$('#index').live('pagebeforeshow',function(e,data){
$("li").tap(function() {
$(this).buttonMarkup({ icon: "edit" });
});
});
我的解决方案是首先从锚子元素中删除 ui-icon... 类,然后将其设置为另一个。
例如,对于 ID 为“ElementId1”且图标类型为“check”的列表行,要将图标更改为“delete”:
$("#ElementId1").children('a').first().removeClass('ui-icon-check');
$("#ElementId1" ).children('a').first().addClass('ui-icon-delete');