当使用 jQuery.attr() 设置属性时，浏览器不会更新 css 中的样式
我有一个网站，列出了一组可以下载的文件。自定义属性 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 自定义属性，但它变得太混乱，特别是当将来可能向元素添加其他类时。
I have a site hat lists a set of files that can be downloaded. The custom attribute docType is set based on the file extension. If there is no extension the docType is set to "unknownDoc". The CSS file looks similar to this:
.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;
}
It's quite possible that a user will upload a document that we don't have a css style set up for yet. In this case the item will have a docType but no background-image. In these cases I want the unknownDoc style to be applied. So I use the following:
$('.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\"]");
}
});
This works fine. What I don't understand is why do I have to use the addClass statement? The attr or addClass by themselves does not work. It's as if adding the attribute doesn't cause the browser to re-style the item based on the new attribute like addClass does. Is this a jQuery thing or a browser thing?
Is there a better way to do this?
I tried using just classes rather than the docType custom attribute but it gets too messy, especially when additional classes may be added to the element in the future.
如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱，如果其他用户或者作者回复了您的评论，将不能在第一时间通知您！
发布评论
评论（3）
似乎只适用于 IE，因为 Chrome 和 FF 无需 addClass 即可正常工作。上面的一个更简单的版本是：
似乎 IE（或 jQuery）无法理解选择器的动态更改。
您可以在此小提琴中验证 FF 和 Chrome 是否正常：http://jsfiddle.net/fUSVF//
Seems to just be with IE as Chrome and FF work fine without the addClass. An easier version of yours above is:
Seems to be IE's inability (or jQuery's) to understand dynamic changes to selectors.
You can verify in this fiddle that FF and Chrome are fine: http://jsfiddle.net/fUSVF//
不是更简单吗？
在检测到这种情况后，将 css 更改为：
.addClass("unregisteredExtension")Wouldn't it be simpler to change your css to:
And just
.addClass("unregisteredExtension")after detecting this case?您实际上不应该添加自定义属性。浏览器不必关心它们 - 实际上，完全忽略它们是它们能做的最好的事情，这样可以确保如果您在其中存储一些垃圾，也不会弄乱任何东西。
如果您想通过 JavaScript+CSS 更改外观，请使用类。最简单的方法是使用一个没有其他类的元素，那么你可以简单地执行
$(elem).removeClass().addClass('yourNewClass');You are not really supposed to add custom attributes. Browsers don't have to care about them - actually, ignoring them completely is the best thing they can do so ensure if you store some crap in them it won't mess anything up.
If you want to change appearance via JavaScript+CSS, use classes. The easiest way is with an element which just has no other classes, then you can simply do
$(elem).removeClass().addClass('yourNewClass');