动态更改 jQuery Mobile 列表视图中的图标

Posted 2023-05-09

【中文标题】动态更改 jQuery Mobile 列表视图中的图标

【英文标题】：Dynamically change icon in jQuery Mobile listview

【发布时间】：2013-02-13 10:40:25

【问题描述】：

当我动态更改图标时，它不会反映页面上的更改，即使在标记中它已更改。

例子：

      <ul data-role="listview" data-autodividers="true" data-filter="true" data-inset="true">
        <li data-icon="check"><a href="#">Adam Kinkaid</a></li>
        <li data-icon="check"><a href="#">Alex Wickerham</a></li>
        <li data-icon="check"><a href="#">Avery Johnson</a></li>
        <li data-icon="check"><a href="#">Bob Cabot</a></li>
        <li data-icon="check"><a href="#">Caleb Booth</a></li>
        <li data-icon="check"><a href="#">Christopher Adams</a></li>
        <li data-icon="check"><a href="#">Culver James</a></li>
    </ul>

$("li").tap(function() 
    //Alert the old icon
    alert($(this).jqmData("icon"));

    //Toggle
    $(this).jqmData("icon") == "false" ? $(this).jqmData("icon", "check") :             $(this).jqmData("icon", "false");

    //Alert the new icon
    alert($(this).jqmData("icon"));
);

http://jsfiddle.net/Mc97V/

【参考方案1】：

我给你做了一个有效的例子：http://jsfiddle.net/Gajotres/qgE6L/

$('#index').live('pagebeforeshow',function(e,data)    
    $("li").tap(function() 
        $(this).buttonMarkup( icon: "edit" );
    );  
);

【讨论】：

谢谢，这主要是可行的。但是，在 check/false 之间切换，而不是 false，它显示一个模糊的 +。在其他任何两个之间切换会正确显示图标

那是因为图标“false”不存在。看看这个图标列表：jquerymobile.com/demos/1.2.0-alpha.1/docs/buttons/…。您可以添加自己的自定义图标，但这是另一个问题。或者你想删除带有 false 的图标？

我要去掉带false的图标，耶

NVM，明白了。我使用了 .buttonMarkup( icon: "" )。感谢您的帮助