我有一个站点列出了一组可以下载的文件。自定义属性 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 自定义属性,但它变得太乱了,尤其是当将来可能向元素添加其他类时。
最佳答案
似乎只适用于 IE,因为 Chrome 和 FF 在没有 addClass 的情况下也能正常工作。你上面的一个更简单的版本是:
$(this).attr("docType", "unknownDoc").removeClass('TitleColumn').addClass('TitleColumn');
似乎是 IE(或 jQuery)无法理解选择器的动态变化。
您可以在这个 fiddle 中验证 FF 和 Chrome 是否正常:http://jsfiddle.net/fUSVF//
关于jquery - 使用 jQuery.attr() 设置属性时,浏览器不会从 css 更新样式,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/4329947/