Question

默认情况下，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>

Answer 1

图标只是listitem内锚标记的一个类，您可以在项目点击时切换类：

<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

列表视图：过滤器显示 - 单击更改图标

1 个答案: