2

ダウンロードできる一連のファイルを一覧表示するサイト ハットがあります。カスタム属性 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 カスタム属性ではなくクラスだけを使用してみましたが、特に将来、要素に追加のクラスが追加される可能性がある場合は、面倒です。

4

3 に答える 3

1

ChromeとFFはaddClassなしで正常に動作するため、IEと一緒にいるようです。上記の簡単なバージョンは次のとおりです。

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

IE (または jQuery) がセレクターへの動的な変更を理解できないようです。

このフィドルで、FF と Chrome が問題ないことを確認できます: http://jsfiddle.net/fUSVF//

于 2010-12-01T23:05:37.920 に答える
0

CSS を次のように変更する方が簡単ではないでしょうか。

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

そして.addClass("unregisteredExtension")、この事件を発見した直後ですか？

   if (hasNoDocImage && docType) {
      $(this).addClass("unregisteredExtension")
   }
于 2010-12-01T23:11:43.617 に答える
0

カスタム属性を追加することは実際には想定されていません。ブラウザはそれらを気にする必要はありません - 実際には、それらを完全に無視することができる最善の方法です.

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

于 2010-12-01T23:18:59.367 に答える