在 Chrome 和 IE 中使用 jQuery 更改类答案

【问题标题】：Change class using jQuery in Chrome and IE在 Chrome 和 IE 中使用 jQuery 更改类
【发布时间】：2011-11-02 18:47:57
【问题描述】：

当我单击它时，我尝试从 jQuery 更改按钮类。我使用 .removeClass 和 .addClass 但在 Chrome 和 IE 9 中，我的图像不显示。

<script type="text/javascript">
    $(document).ready(
    function () {
        $('#myButton').click(
            function () {
             $('#myButton').removeClass('forgetPass').addClass('forgetPassoff');
        });
    });
</script>

.forgetPass
{
    background-image:url("http://login.mywai.de/DCILogin/Images/Send_Button.png");
    border: 0px;
    width: 89px;
    height: 21px;
}

.forgetPassoff
{
    background-image:url("http://login.mywai.de/DCILogin/Images/Send_Button_off.png");
    border: 0px;
    width: 89px;
    height: 21px;
}

<input type="submit" value="" class="forgetPass" id="myButton" />

我使用 jQuery 1.6.2。

这是我得到的，而不是图像：

谢谢。

【问题讨论】：

还有一些 HTML 和 CSS 要显示吗？
该代码可以正常工作我已经多次使用该模式来切换类，如果它没有达到您的预期，那么它可能是 CSS 而不是 jQuery 的问题。
嗯...如果类上有背景图像，则页面可能必须加载这些图像，或者可能无法加载它们。我想知道一些事情......如果你可以使用 show() 和 hide() 代替，或者如果在页面加载时，你已经分配了两个类，然后你立即切换它们。
但是为什么 Chrome 不能加载它们而 FireFox 可以呢？在 FF 中工作正常...

标签： jquery image internet-explorer class google-chrome

【解决方案1】：

你需要点击方法来进行操作。

$('#myButton').click(function(){
  $(this).removeClass('forgetPass').addClass('forgetPassoff'); 
});

更多...此删除/添加类逻辑必须有效。也许问题出在您的 CSS 或代码中的其他地方。

【讨论】：

除了$(this) vs $('#myButton')，你的代码和安德烈的没有什么不同？
没错，我的观点是（除了在他的示例中点击代码未命中）它应该按原样工作并且问题出在其他地方。
好吧，第一次只有这个代码 $('#myButton').removeClass('forgetPass').addClass('forgetPassoff');没有 $('#myButton').click(function(){ 部分....

【解决方案2】：

在预加载 CSS 背景图像的下方添加行...

<script type="text/javascript">
    $(document).ready(function () {  

        (new Image()).src = 'http://login.mywai.de/DCILogin/Images/Send_Button.png';
        (new Image()).src = 'http://login.mywai.de/DCILogin/Images/Send_Button_off.png';

        $('#myButton').click(function () {
             $('#myButton').removeClass('forgetPass').addClass('forgetPassoff');
        });
    });
</script>

【讨论】：

我之前认为它不在 Chrome 中工作；所以这解决了这个问题。并且简单地添加这两行不会破坏以前工作的浏览器中的任何内容。尝试将它们放在 document.ready 中 - 请参阅更新的答案。

【解决方案3】：

Narnian 解决方案解决了我的问题：“我想知道一些事情......如果你可以使用 show() 和 hide() 代替，或者如果在页面加载时，你已经分配了两个类，然后你立即切换它们。”

HTML 代码

<input type="submit" value="" class="forgetPass" id="myButton" />
<input type="button" value="" class="forgetPassoff" id="myButtonOff" />

jQuery 代码

 $(document).ready(
    function () {
        $('#myButton').click(
            function () {
                $('#myButton').hide();
                $('#myButtonOff').show();
            });
    });

CSS 代码

.forgetPass
{
  background-image:url("http://login.mywai.de/DCILogin/Images/Send_Button.png");
  border: 0px;
  width: 89px;
  height: 21px;
  vertical-align:middle;
}
.forgetPassoff
{
  background-image:url("http://login.mywai.de/DCILogin/Images/Send_Button_off.png");
  border: 0px;
  width: 89px;
  height: 21px;
  vertical-align:middle;
}

【讨论】：

太糟糕了，纳尼安没有将此作为答案发布。请提供尽可能详细的答案并将其标记为已接受。您不应该在“答案”中提出后续问题。