Change data-icon on click with jquery mobile

Question

This is my code:

function togglePOIAndDisplay(toggle){
    var display = $(toggle).attr(\'data-icon\');
    console.log(display);
    if(display == \'minus\'         


        

Answer 1

This depends on whether it's a button, or a select, or some other thing that accepts the data-icon attribute. Unfortunately, jQuery Mobile doesn't have great support for dynamically changing things controlled by data-* attributes, so you'll have to adjust the attribute as well as modify the classes on the child elements.

For buttons, something like this ought to work:

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