jquery - 使用 jQuery.attr() 设置属性时,浏览器不会从 css 更新样式

标签 jquery css addclass attr

我有一个站点列出了一组可以下载的文件。自定义属性 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/

相关文章:

javascript - Highcharts 生成不正确

php - PHP 中嵌入 MySQL 请求的 Javascript

html - 三个 div 并排响应

jQuery 和原型(prototype)选择器的疯狂

jQuery - 将具有颜色属性的类添加到链接

javascript - 在 JS 中 trim 数组

css - wordpress 中的 Css 网格面临的问题

html - 如何更改 D3 中的 CSS "animation-delay"属性?

jquery - 使用 jquery 将Class添加到<a>

javascript - Bootstrap Selectpicker 不会使用内置函数重置