Question

我有一个问题，我用以下代码更改了我的jquery-mobile属性：

 this.$("#" + idOfButton).attr('data-icon', "check")
     .find('.ui-icon')
     .addClass('ui-icon-' + "check")
     .removeClass('ui-icon-' + "grid");

运行此代码时，我会在chrome调试器中看到所有类和data-role的更新。我在骨干视图中这样做。

问题是我从未在实际视图中看到更改，视图仍显示旧网格图标。

Answer 1

我认为您的选择器存在问题。使用$("#" + idOfButton)来选择元素就足够了。所以，要更改图标：

$("#" + idOfButton).removeClass('ui-icon-grid').addClass('ui-icon-check');

仅供参考：jQuery Mobile对按钮有一种“二元性”，可以使用<input>和<a>标签声明。因此，更改图标可以通过两种方式完成。

<强> HTML ：

<input type="button" data-icon="grid" id="test_input" value="Test with 'input' tag"/>
<a href="#" data-role="button" data-icon="grid" id="test_a">Test with 'a' tag</a>

<a href="#" data-role="button" data-inline="true" id="change">Change icon</a>

<强>的JavaScript ：

$(document).on("click", "#change", function()
{
    $("#test_input").button("option", "icon", "check");
    $("#test_a").removeClass("ui-icon-grid").addClass("ui-icon-check");
});

<强> JSFiddle

更新引用jQuery Mobile 1.1.2 / 1.2.0

增强功能不同，这有效：

$("#test_a").find(".ui-icon").removeClass("ui-icon-grid").addClass("ui-icon-check");

但您无法使用$(document).on()附加活动。改为使用：

$("#change").live("click", function()
{
    $("#test_a").find(".ui-icon").removeClass("ui-icon-grid").addClass("ui-icon-check");
});

在骨干视图内切换jquery-mobile ui按钮的图标

1 个答案: