如何使用javascript更改JQuery Mobile按钮图标

Question

我想有一个按钮，根据用户选择更改数据图标类

示例按钮将是：

<a href="#language2" data-rel="popup" data-role="button" 
                     data-icon="english-flag" data-inline="true" 
                     data-position-to="origin">
    <span id="language3">English</span>
</a>

我想知道我需要实现哪些javascript代码才能将自定义定义的data-icon="english-flag"更改为data-icon="another-flag"

提前致谢。

编辑：下面关于如何指定影响哪个按钮的后续问题的答案可以在以下位置找到; 如何使用javascript更改特定的JQuery Mobile按钮图标

Answer 1

jQuery Mobile有一个预定义的功能：

$('a').buttonMarkup({ icon: "star" });

仅更改属性是不够的，最终按钮重新定位必须使用.buttonMarkup（函数）完成。

这是官方文档： http ： //jquerymobile.com/demos/1.2.0/docs/buttons/buttons-options.html

这是一个例子： http ： //jsfiddle.net/Gajotres/AmFKa/

此外，因为您正在创建自定义按钮，仅仅更改图标名称是不够的，首先您需要在css中定义它，如下所示：

<style type="text/css">
    .ui-icon-edit {
       background-image: url(icons-18-white.png); // This should be your picture
       background-repeat: no-repeat;
       background-position: -824px 50%;
    }
</style>

我们会像这样添加这个新图标：

$('a').buttonMarkup({ icon: "edit" });

在这种情况下，我们正在添加图片编辑 。 现在请注意它的cass名称.ui-icon-edit ，要添加一个新的图标类，您需要将.ui-icon-字符串与图标名称组合在一起。 在您的情况下，您的班级名称将是.ui-icon-another-flag 。

Answer 2

只需将值传递给数据函数即可。 请参阅文档

$("#language2").data("icon", "another-flag");

Answer 3

您可以使用$('selector').attr('data-icon', 'newValue')来更改属性。

文档