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

把你的css改成这样不是更简单吗：

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

在检测到这种情况后只是.addClass("unregisteredExtension")？

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

Answer 3

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

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