2011-07-19 21 views
5

Hola, tengo dificultades para cambiar dinámicamente algunos atributos en jquery mobile por algún motivo. Puedo ver que los atributos se cambian en el marcado cuando llamo a los métodos respectivos que estoy usando, pero la apariencia de los elementos no cambia. ¿Hay una necesidad de reiniciar una lista, etc. en Jquery Mobile?jquery mobile data-icon

Por cierto, aquí tienes código para mostrar cómo me pongo los atributos:

$('.className').each(function(){ 
    if ($(this).text() == tempLoc){ 
    console.log('FOUND MATCH WITH tempLoc and ' + $(this).text()); 
    $(this).attr('data-icon','alert'); 
    $(this).attr('data-theme','e'); 
} 
}); 

Como ya he dicho esto está funcionando en el código, pero los elementos no actualizar o cambiar la apariencia se refiere. Alguna idea?

ACTUALIZACIÓN: He encontrado una manera de actualizar el icono de datos pero, por supuesto, sigue siendo desordenado e innecesariamente. Se puede acceder al-icono de datos utilizando el siguiente método:

$(this).children('div.ui-btn-inner').children('span.ui-icon').removeClass('ui-icon-arrow-r'); 
$(this).children('div.ui-btn-inner').children('span.ui-icon').addClass('ui-icon-alert'); 

En ese caso $ (este) se refiere al propio botón y el icono en sí se encuentra en que es ui-btn-interno lapso de niños. ui-icon-arrow-r resultará. Sustituye las clases que estés utilizando en este caso. Si alguien sabe de una manera de actualizar los botones correctamente, lo agradecería.

+0

encontré con este no mucho después de la publicación de esta pregunta: http://forum.jquery.com/topic/how-to- refresh-the-theme-of-a-button Esto ayuda un poco, pero todavía está desordenado y no está efectivamente refrescando el elemento correctamente. Además, el icono de datos sigue siendo el mismo, lo cual es bastante molesto. El tema cambiará pero no el ícono de datos. –

Respuesta

2

Deberías usar realmente los selectores de JQM para eso, jqmData() como se especifica en el documentation.

p. Ej.

$('.className').each(function(){ 
    if ($(this).text() == tempLoc){ 
    console.log('FOUND MATCH WITH tempLoc and ' + tempLoc); 
    $(this).jqmData('icon','alert'); 
    $(this).jqmData('theme','e'); 
    } 
}); 

Esperanza esto ayuda a resolver su problema

+2

Este código no parece tener ningún efecto visual. –

12
$("#myButtonName").buttonMarkup({ icon: "star" }); 

Esto va a cambiar sobre la marcha. Aquí está mi código:

$(".menu-button").toggle(
    function() 
    {    
     $(this).buttonMarkup({ icon: "star" }); 
     $(".navigation-menu-container").show(); 
    }, 
    function() 
    { 
     $(".navigation-menu-container").hide();  
    } 
); 

Ver documentos aquí:

http://jquerymobile.com/test/docs/buttons/buttons-options.html

+0

Parece que también funciona para listview-items. –

+0

$ (this) .buttonMarkup ({icon: "star"}); trabajado para que actualice dinámicamente el icono de vista de lista. –