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

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

$(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 回答