jQuery.attr（）を使用して属性を設定すると、ブラウザはCSSからスタイルを更新しません

Question

サイトの帽子には、ダウンロード可能なファイルのリストがあります。カスタム属性docTypeは、ファイル拡張子に基づいて設定されます。拡張子がない場合、docTypeは "unknownDoc"に設定されます。 CSSファイルには、次のようになります。

.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; 
} 

それは、ユーザが、我々はまだのために設定CSSスタイルを持っていないドキュメントをアップロードすることが十分に可能です。この場合、アイテムにはdocTypeがありますが、背景イメージはありません。このような場合は、unknownDocスタイルを適用する必要があります。だから私は次を使用します：

$('.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\"]"); 
    } 
}); 

これはうまくいきます。なぜ私は理解していないのですが、なぜaddClassステートメントを使用する必要がありますか？ attrまたはaddClass自体は機能しません。これは、属性を追加しても、ブラウザがaddClassのような新しい属性に基づいてアイテムのスタイルを変更しない場合と同じです。これはjQueryのものかブラウザのものですか？

これを行うより良い方法はありますか？

私はdocTypeカスタム属性ではなくクラスだけを使用しようとしましたが、あまりにも面倒になりました。特に将来、追加のクラスが追加される可能性があります。

Answer 1

ChromeとFFのようにIEで動作するように見えますが、addClassを使用しないとうまく動作しません。上記のあなたの容易なバージョンは次のとおりです。

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

は、セレクタの動的な変化を理解するためにIEのできないこと（またはjQueryの）しているようです。

あなたはFFとChromeは大丈夫であることを、このフィドルで確認できます。この場合を検出した後

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

そして、ちょうど.addClass("unregisteredExtension")：http://jsfiddle.net/fUSVF//

Answer 2

はにあなたのCSSを変更することが簡単にできませんか？

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

Answer 3

本当にカスタム属性を追加する必要はありません。ブラウザは気にする必要はありません。実際にはそれらを完全に無視するのが最良の方法ですので、何かを保存しておくと、何も邪魔することはありません。

JavaScript + CSSで外観を変更する場合は、クラスを使用します。最も簡単な方法は他のクラスを持たない要素だけです。単純に行うことができます$(elem).removeClass().addClass('yourNewClass');