Question

Jquery Mobile图标显示的问题，想通过js改变data-icon的值，代码如下， 真心求教高手解答 谢谢......

<div data-role="navbar" data-iconpos="top">
<ul>
<li><a data-icon="minus" id="outBoxPrePage">上一页</a></li>
<li><a data-icon="minus" id="outBoxNextPage">下一页</a></li>
</ul>
</div>

Answer 1

这个只是改变data-icon属性是不行的
你要做的是。改变渲染之后的代码。
你要知道。之所以会有图标是因为jquery mobile把渲染后的html代码加入了class。而class就是通过
css sprint 把图标图片附加在页面上的。如果你在页面已经渲染完成后。
想要改变图标图片。就必须要动态改变class
你可以通过firebug等前端调试工具。
查看渲染后的html代码。看是哪个class跟图标图片相关
然后根据文档，或者自己去jquery mobile的css样式里去找。
在程序里动态的$("#outBoxPrePage").removeClass('原来的class').addClass('新class‘);

Answer 2

$("#outBoxPrePage").attr("data-icon","新的icon值");
$("#outBoxNextPage").attr("data-icon","新的icon值");

追问

你试一下 这在jquery mobile中是 不行的 ，我是分页的时候用到的，用的是ajax请求 首页和尾页的data-icon有别于中间页面。还是谢谢你的回答......如果你那边能够解决请帖一下详细的代码

Answer 3

jQuery.mobile.activePage.find('a[data-icon=minus]').attr('data-icon','home').trigger('create').find('.ui-icon').removeClass('ui-icon-minus').addClass('ui-icon-home')

假设你的 icon 原来是 minus，除了改了 data-icon 之外，还得改里面的 ui-icon 元素的 ui-icon-xxxx 值。