Изменить класс с помощью jQuery в Chrome и IE

Question

Я пытаюсь изменить класс кнопки, когда нажимаю на нее, из 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.

Вот что я получаю вместо изображений:

Спасибо.

Answer 1

Добавьте строки ниже, чтобы предварительно загрузить фоновые изображения 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>

Answer 2

Вам необходим метод click для выполнения операции.

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

Далее подробнее ... эта логика удаления / добавления классов должна работать.Возможно, проблема заключается в вашем CSS или где-то еще в коде.

Answer 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;
}