Lors de l'utilisation de jQuery.attr() pour définir un attribut, le navigateur ne met pas à jour le style à partir du css.

Question

J'ai un site qui répertorie un ensemble de fichiers qui peuvent être téléchargés. L'attribut personnalisé docType est défini en fonction de l'extension de fichier. S'il n'y a pas d'extension, le docType est défini sur "unknownDoc". Le fichier CSS ressemble à ceci:

.TitleColumn[docType="pdf"] 
{ 
    background: url("/images/common/icons/pdf.png") no-repeat left center; 
} 

.TitleColumn[docType="doc"], TitleColumn[docType="docx"] 
{ 
    background: url("/images/common/icons/word.png") no-repeat left center; 
} 

.TitleColumn[docType="unknownDoc"] 
{ 
    background: url("/images/common/icons/unknownDoc.png") no-repeat left center; 
} 

Il est tout à fait possible qu'un utilisateur télécharge un document que nous n'avons pas de style css mis en place pour encore. Dans ce cas, l'élément aura un docType mais pas d'image de fond. Dans ces cas, je veux que le style unknownDoc soit appliqué. Donc, j'utilise ce qui suit:

$('.TitleColumn').each(function (index) { 
    var hasNoDocImage = $(this).css("background-image") == "none"; 
    var docType = $(this).attr("docType"); 

    if (hasNoDocImage && docType) { 
     $(this).attr("docType", "unknownDoc"); 
     $(this).addClass("TitleColumn[docType=\"unknownDoc\"]"); 
    } 
}); 

Cela fonctionne très bien. Ce que je ne comprends pas, c'est pourquoi dois-je utiliser l'instruction addClass? L'attr ou addClass par eux-mêmes ne fonctionne pas. C'est comme si l'ajout de l'attribut ne permettait pas au navigateur de re-styler l'élément en fonction du nouvel attribut comme le fait addClass. Est-ce une chose jQuery ou une chose de navigateur?

Y a-t-il une meilleure façon de procéder?

J'ai essayé d'utiliser uniquement des classes plutôt que l'attribut personnalisé docType, mais cela devient trop compliqué, en particulier lorsque des classes supplémentaires peuvent être ajoutées à l'élément dans le futur.

Answer 1

Semble être juste avec IE comme Chrome et FF fonctionnent bien sans l'addClass. Une version plus facile de la vôtre ci-dessus est:

$(this).attr("docType", "unknownDoc").removeClass('TitleColumn').addClass('TitleColumn'); 

semble être l'incapacité de IE (ou jQuery de) pour comprendre les changements dynamiques aux sélecteurs.

Vous pouvez vérifier dans ce violon que FF et Chrome sont très bien: http://jsfiddle.net/fUSVF//

Answer 2

Ne serait-il pas plus simple de changer votre css:

.TitleColumn[docType="unknownDoc"], .unregisteredExtension 
{ 
    background: url("/images/common/icons/unknownDoc.png") no-repeat left center; 
} 

Et .addClass("unregisteredExtension") après la détection de ce cas?

if (hasNoDocImage && docType) { 
     $(this).addClass("unregisteredExtension") 
    } 

Answer 3

Vous n'êtes pas vraiment censé ajouter des attributs personnalisés. Les navigateurs n'ont pas à se soucier d'eux - en fait, les ignorer complètement est la meilleure chose qu'ils peuvent faire, alors assurez-vous que si vous stockez de la merde dedans, cela ne gâchera rien.

Si vous souhaitez modifier l'apparence via JavaScript + CSS, utilisez des classes. Le plus simple est avec un élément qui n'a tout simplement pas d'autres classes, alors vous pouvez simplement faire $(elem).removeClass().addClass('yourNewClass');