更改jQuery Mobile中的数据图标

Changing data-icon in jQuery Mobile?

本文关键字：数据 图标 jQuery Mobile 更改      更新时间：2024-01-14

我在网上找到了很多解决方案，但都不适合我。基本上，我想切换按钮的图标。这是HTML:

  <div data-role="navbar" data-iconpos="top">
    <ul>
      <li><a data-icon="arrow-u">View suggestions</a></li>
    </ul>
  </div>

我尝试了所有这些：

$(this).buttonMarkup({ icon: 'arrow-u' });

//

$(this).attr('data-icon','arrow-u');
$(this).children().children().next().removeClass('ui-icon-arrow-d').addClass('ui-icon-arrow-u');

//

$(this).jqmData('icon','arrow-u');

然而，由于某种原因，在运行上述任何操作后，按钮的子元素都会消失（jQueryMobile在按钮内添加了一堆<span>）。

最好的方法是：

$('#button').buttonMarkup({ icon: "home" });

试试这个：

$(this).attr('data-icon','arrow-u').button().trigger("refresh");

请参阅相关论坛帖子：http://forum.jquery.com/topic/how-dynamically-update-data-attributes

我发现了问题！我使用了$(this).text('Hide suggestions')，它删除了所有子元素。我把它改成了$(this).find('.ui-btn-text').text('Hide suggestions');，现在它运行得很好！

这些对我有用：

$("#yourButtonId .ui-icon").removeClass("ui-icon-gear").addClass("ui-icon-delete");
$(this).children("span").children(".ui-icon").removeClass("ui-icon-gear").addClass("ui-icon-delete");
$(this).find(".ui-icon").removeClass("ui-icon-gear").addClass("ui-icon-save");

我不知道女巫是最好的，我认为是最后一个。

相关文章：