使用jquery.attr（）设置属性时，浏览器不会更新CSS的样式

StackOverflow https://stackoverflow.com/questions/4329947

  •  29-09-2019
  •  | 
  •  

题

我有一个网站帽子列出了一组可以下载的文件。自定义属性Doctype是基于文件扩展名设置的。如果没有扩展，则Doctype设置为“未知数”。 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，但没有背景图像。在这些情况下，我希望应用未知的风格。因此，我使用以下内容：

$('.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的新属性重新安装项目。这是杂音的东西还是浏览器的东西？

有一个更好的方法吗？

我尝试仅使用类，而不是使用Doctype自定义属性，但它变得太混乱了，尤其是当将来可能添加其他类别时。

有帮助吗？

解决方案

似乎只与IE一起使用，因为Chrome和FF在没有addClass的情况下正常工作。您上面的一个更轻松的版本是：

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

似乎是IE无法（或jQuery）了解选择器的动态变化。

您可以在此小提琴中验证FF和Chrome很好： http://jsfiddle.net/fusvf//

其他提示

将您的CSS更改为：

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

只是 .addClass("unregisteredExtension") 发现此案后？

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

您并不应该添加自定义属性。浏览器不必关心它们 - 实际上，完全忽略它们是他们可以做的最好的事情，因此请确保如果您在它们中存储一些废话，就不会弄乱任何东西。

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

许可以下： CC-BY-SA 和 归因
不隶属于 StackOverflow
scroll top