jquery mobile data-icon

Posted 2023-05-09

【中文标题】jquery mobile data-icon

【英文标题】：

【发布时间】：2011-10-08 09:19:51

【问题描述】：

您好，由于某种原因，我在动态更改 jquery mobile 中的某些属性时遇到了困难。当我调用我正在使用的相应方法时，我可以看到标记中的属性正在更改，但元素的外观没有改变。是否需要在 Jquery Mobile 中重新初始化列表等？

顺便说一下，这里有一些代码向您展示我是如何设置属性的：

$('.className').each(function()
    if ($(this).text() == tempLoc)
    console.log('FOUND MATCH WITH tempLoc and ' + $(this).text());
    $(this).attr('data-icon','alert');
    $(this).attr('data-theme','e');

);

正如我所说，这是在代码中工作，但元素不会更新或更改外观。 有什么想法吗？

更新： 我找到了一种更新数据图标的方法，但它当然仍然很混乱而且没有必要。您可以使用以下方法访问数据图标：

$(this).children('div.ui-btn-inner').children('span.ui-icon').removeClass('ui-icon-arrow-r');
$(this).children('div.ui-btn-inner').children('span.ui-icon').addClass('ui-icon-alert');

在这种情况下，$(this) 指的是按钮本身，而图标本身可以在它的 ui-btn-inner 子项的 span 中找到。 ui-icon-arrow-r 将产生。在这种情况下替换您使用的任何类。如果有人知道正确刷新按钮的方法，我将不胜感激。

【问题讨论】：

在发布这个问题后不久偶然发现了这个问题：forum.jquery.com/topic/how-to-refresh-the-theme-of-a-button 这有点帮助，但它仍然很混乱，并且不能有效地正确刷新元素。加上数据图标保持不变，这很烦人。主题会改变，但数据图标不会改变。

【参考方案1】：

$("#myButtonName").buttonMarkup( icon: "star" );

这将即时更改它。这是我的代码：

$(".menu-button").toggle(
    function()
                
        $(this).buttonMarkup( icon: "star" );
        $(".navigation-menu-container").show();
    ,
    function()
    
       $(".navigation-menu-container").hide();    
    
);

在此处查看文档：

http://jquerymobile.com/test/docs/buttons/buttons-options.html

【讨论】：

$(this).buttonMarkup( icon: "star" );为我工作以动态更新列表视图图标。

【参考方案2】：

相关：

现场示例：

http://jsfiddle.net/phillpafford/8pwFK/29/（点击后颜色和图标会发生变化）

相关问题的链接：

Specifying the styles for the selected tab in a navbar

【参考方案3】：

您应该真正使用 JQM 选择器，如 documentation 中指定的 jqmData()。

例如

$('.className').each(function()
   if ($(this).text() == tempLoc)
     console.log('FOUND MATCH WITH tempLoc and ' + tempLoc);
     $(this).jqmData('icon','alert');
     $(this).jqmData('theme','e');
   
);

希望这有助于解决您的问题