使用 addClass() 未在 IE6 中应用类答案

【问题标题】：Class not being applied in IE6 using addClass()使用 addClass() 未在 IE6 中应用类
【发布时间】：2010-07-14 11:14:15
【问题描述】：

我的 HTML 中有以下 DIV，其中包含一个大背景图片：

<div id="widget-image" class="tyreinfo1"></div>

根据选择页面上表单上的哪个选择框，背景图像将滚动到不同的点。这些位置的定义如下：

#widget-image.tyreinfo1 { background-position: 0px -105px }
#widget-image.tyreinfo2 { background-position: 0px -210px }
#widget-image.tyreinfo3 { background-position: 0px -315px }
#widget-image.tyreinfo4 { background-position: 0px -420px }
#widget-image.tyreinfo5 { background-position: 0px -525px }

选择框上的代码是：

onfocus="$('#widget-image').removeClass().addClass('tyreinfo1');"

5 个选择框，每个都添加不同的轮胎信息类。

惊讶，惊讶它在 IE6 中不起作用。我已经使用调试工具栏进行了检查，并且肯定会应用这些类，但是背景位置每次都会重置为 0px 0px。

任何帮助表示赞赏！

【问题讨论】：

你真的将jQuery放在onfocus属性中吗？
您不是偶然使用 .pngs 作为图像的，是吗？如果是这样，大多数 javascript 修复程序不支持 background-position 属性。

标签： jquery css

【解决方案1】：

先手动编写html和css来检查CSS是否正常工作，我怀疑这是IE6的CSS实现有问题造成的。

我想你是在 #widget-image 上设置背景图像（完全合理），但 IE6 会将 '#widget-image.tyreinfo1' 读取为 '.tyreinfo1' （完全有缺陷），这意味着 #widget 上的定位-image 优先。你可以试试

#widget-image.tyreinfo1 { background-position: 0px -105px !important }

但您最好为每个班级设置完整的背景样式。

【讨论】：

【解决方案2】：

试试这个：您只是简单地指定了 .removeClass() ，您没有指定要删除的类。我认为您试图删除现有类并为其添加一个新类。所以这就是我的建议。

$('#widget-image').removeAttr('class').addClass('tyreinfo1');

【讨论】：

removeClass() 很好，定义为删除所有类。

【解决方案3】：

您是否正在使用 PNG 和 PNG 修复脚本？如果是这样，背景定位在 IE6 中将不起作用。您还必须在每次更新位置时添加图片 URL。

【讨论】：

如果使用 PNG，请尝试使用虚拟 GIF 进行测试，如果出现问题，则需要使用 GIF 或 JPG 而不是 PNG 的 IE6 样式表。

【解决方案4】：

我同意@Inrbob。首先写出 CSS 以确保它以这种方式工作。然后，如果是这样，那么试试这个：

你有选择权吗？给每个选择一个id。然后附加一个单独的 javascript 文件并使用 ID 调用它。

$('#id1').click(function() {
  $('#widget-image').removeAttr('class').addClass('.whatever');
});

您也可以尝试另一种方式，即使用 focus()。

$('#id1').focus(function() {
  $('#widget-image').removeAttr('class').addClass('.whatever');
});

我怀疑任何一种解决方案都应该有效。

如果没有，那么我建议您使用http://jsfiddle.net 发布您的整个 HTML 和 CSS，并让我们仔细查看整个情况。

祝你好运。

【讨论】：

【解决方案5】：

可能是因为你的 css 定义缺少分号；

#widget-image.tyreinfo1 { background-position: 0px -105px; }

否则您可以尝试通过更改属性的值来更改类，例如：

onfocus="$('#widget-image').attr('class','tyreinfo1');"

在某些情况下，这对我有用，但其他方法失败了。当然，发布更多示例代码会有所帮助。

【讨论】：