При использовании jQuery.attr () для установки атрибута браузер не обновляет стиль из CSS - PullRequest
Новая
       8

При использовании jQuery.attr () для установки атрибута браузер не обновляет стиль из CSS

2 голосов
/ 02 декабря 2010

У меня на сайте есть список файлов, которые можно скачать. Пользовательский атрибут 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. В этом случае у элемента будет тип документа, но нет фонового изображения. В этих случаях я хочу применить стиль 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? Аттр или addClass сами по себе не работают. Как будто добавление атрибута не заставляет браузер изменять стиль элемента на основе нового атрибута, как это делает addClass. Это jQuery или браузер?

Есть ли лучший способ сделать это?

Я пытался использовать только классы, а не пользовательский атрибут docType, но он становится слишком запутанным, особенно когда в будущем к элементу могут быть добавлены дополнительные классы.

Ответы [ 3 ]

1 голос
/ 02 декабря 2010

Кажется, что просто с IE, так как Chrome и FF отлично работают без addClass. Более простая версия выше: 

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

Кажется, неспособность IE (или jQuery) понимать динамические изменения в селекторах.

Вы можете проверить в этой скрипке, что FF и Chrome в порядке: http://jsfiddle.net/fUSVF//

0 голосов
/ 02 декабря 2010

Вы не должны добавлять пользовательские атрибуты.Браузерам не нужно заботиться о них - фактически, их полное игнорирование - лучшее, что они могут сделать, поэтому убедитесь, что если вы храните в них какую-то хрень, это ничего не испортит.

Если вы хотите изменитьпоявление через JavaScript + CSS, используйте классы.Самый простой способ - с элементом, который просто не имеет других классов, тогда вы можете просто сделать $(elem).removeClass().addClass('yourNewClass');

0 голосов
/ 02 декабря 2010

Не проще ли изменить свой css на: 

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

А просто .addClass("unregisteredExtension") после обнаружения этого случая? 

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