当使用 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

似乎只适用于 IE，因为 Chrome 和 FF 无需 addClass 即可正常工作。上面的一个更简单的版本是：

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

似乎 IE（或 jQuery）无法理解选择器的动态更改。

您可以在此小提琴中验证 FF 和 Chrome 是否正常：http://jsfiddle.net/fUSVF//

Answer 2

不是更简单吗？

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

在检测到这种情况后，将 css 更改为： .addClass("unregisteredExtension")

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

Answer 3

您实际上不应该添加自定义属性。浏览器不必关心它们 - 实际上，完全忽略它们是它们能做的最好的事情，这样可以确保如果您在其中存储一些垃圾，也不会弄乱任何东西。

如果您想通过 JavaScript+CSS 更改外观，请使用类。最简单的方法是使用一个没有其他类的元素，那么你可以简单地执行 $(elem).removeClass().addClass('yourNewClass');