点击jquery mobile更改数据图标

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/

如本文所示如何使用jQueryMobile刷新标题中的按钮？