Listview：过滤器显示 - 单击时更改图标

【问题标题】：Listview: Filter Reveal - change icon on clickListview：过滤器显示 - 单击时更改图标
【发布时间】：2014-03-28 06:44:45
【问题描述】：

默认情况下，jQM 使用 carat-r 图标对过滤结果进行样式设置，有没有办法覆盖它，所以当点击它时它会变为复选图标？

<ul data-role="listview" data-filter="true" data-filter-reveal="true" data-filter-placeholder="Search fruits..." data-inset="true">
<li><a href="#">Apple</a></li>
<li><a href="#">Banana</a></li>
<li><a href="#">Cherry</a></li>
<li><a href="#">Cranberry</a></li>
<li><a href="#">Grape</a></li>
<li><a href="#">Orange</a></li>

【问题讨论】：

标签： android jquery jquery-mobile

【解决方案1】：

图标只是列表项内锚标记上的一个类，您可以在项目单击时切换类：

<ul id="myList" data-role="listview" data-filter="true" data-filter-reveal="true" data-filter-placeholder="Search fruits..." data-inset="true">
  <li><a class="listItemClick" href="#">Apple</a></li>
  <li><a class="listItemClick" href="#">Banana</a></li>
  <li><a class="listItemClick" href="#">Cherry</a></li>
  <li><a class="listItemClick" href="#">Cranberry</a></li>
  <li><a class="listItemClick" href="#">Grape</a></li>
  <li><a class="listItemClick" href="#">Orange</a></li>
</ul>

$("#myList").on("click", ".listItemClick", function(){
    $(this).removeClass("ui-icon-carat-r").addClass("ui-icon-check");
});

DEMO

【讨论】：