Question

这是我的代码：

function togglePOIAndDisplay(toggle){
    var display = $(toggle).attr('data-icon');
    console.log(display);
    if(display == 'minus'){
        $(toggle).attr('data-icon', 'check');
            console.log(display);
    } else {
        $(toggle).attr('data-icon', 'minus');
        removeMarkers(toggle);
    }
}

它会将minus记录到控制台并进入第一个if（）块并正确执行displayAllPOIOfType（），但它不会反映值的更改，尽管它已正确设置。任何想法，因为它显然正确读取/设置属性。

我需要拨打更新function吗？感谢

Answer 1

这取决于它是一个按钮，一个选择，还是一些接受data-icon属性的东西。不幸的是，jQuery Mobile对动态更改由data-*属性控制的事物没有很大的支持，因此您必须调整属性以及修改子元素上的类。

对于按钮，这样的事情应该有效：

$(buttonSelector).attr('data-icon', newIcon);
                 .find('.ui-icon')
                     .addClass('ui-icon-' + newIcon)
                     .removeClass('ui-icon-' + oldIcon);

Answer 2

如果图标位于如下按钮内：

<a id="buttonID" href="#" data-role="button" data-icon="delete">Button</a>

您可以使用buttonMarkup功能更改图标：

$('#buttonID').buttonMarkup({ icon: "check" });

或自定义图标：

$('#buttonID').buttonMarkup({ icon: "my-icon" });

示例：http://jsfiddle.net/u8fnJ/1/

如此帖How to refresh a button in a header with jQueryMobile?

所示

Answer 3

http://jsfiddle.net/phillpafford/8pwFK/29/

将自定义图标更改为星标图标。

$(this).attr('data-icon','star');
$(this).find('.ui-icon').removeClass('ui-icon-custom').addClass('ui-icon-star');

这个例子很容易学习。

Answer 4

对于列表视图，您需要插入范围。

$("#times").off('click','li').on("click","li",function() {

 /* add a checkbox when you click the listview li  */
 $(this).find('div.ui-li').append('<span class="ui-icon ui-icon-check ui-icon-shadow">&nbsp;</span>');

});

点击jquery mobile更改数据图标

4 个答案: