如何在 jQuery Mobile 中动态更改列表视图列表项的主题？答案

【问题标题】：How do I change a listview list item's theme dynamically in jQuery Mobile?如何在 jQuery Mobile 中动态更改列表视图列表项的主题？
【发布时间】：2012-12-27 17:28:20
【问题描述】：

我有一个拆分列表列表视图，其中包含名称和星形图标作为拆分按钮。

当用户单击星形图标时，我想将星形更改为黄色（或其他东西），并将列表项也更改为该颜色。

我不确定如何动态更改该列表项主题。我试过像这样更改列表项的数据主题

$("#my_list_item").attr("data-theme","d");

然后甚至调用 listview('refresh') 但这不起作用。有什么想法吗？

【问题讨论】：

标签： jquery-mobile

【解决方案1】：

你可以使用：

$(id).buttonMarkup({theme:'a'});

改变。如果您想恢复到旧主题，只需替换旧主题即可。

【讨论】：

【解决方案2】：

您可以通过更改“li”的属性并触发mouseout事件来实现。

$("#my_list_item").attr("data-theme","d").trigger('mouseout');

如果要更改列表中所有列表元素的主题，请使用

$("#my_list li").attr("data-theme","d").trigger('mouseout');

这是工作的 jsfiddle：http://jsfiddle.net/ChaitanyaMunipalle/5yjZV/

【讨论】：

效果很好。但是，如果您想将其切换回原始主题怎么办？我试过了，但没有用： $("#my_list li").attr("data-theme","d").trigger('mouseout');

【解决方案3】：

试试 trigger('create') 方法

$("#my_list_item").attr("data-theme","d").trigger('create');

【讨论】：

【解决方案4】：

删除列表项的按钮上下主题。（例如 ui-btn-up/down-“样本主题角色”）
为列表项的按钮向上和向下主题添加新主题。
设置列表项的新主题。（例如 $(li).attr("data-theme", "swatch theme character")
刷新列表视图。
在列表项上触发 mouseout 事件。

Source

【讨论】：