JQuery определить текущее CSS-фоновое изображение в виде значка / кнопки из трех состояний? - PullRequest
Новая
       10

JQuery определить текущее CSS-фоновое изображение в виде значка / кнопки из трех состояний?

0 голосов
/ 19 февраля 2011

У меня есть три изображения, которые указывают состояние значка приложения, и я пытаюсь использовать css для этого.

Нет проблем с исходным состоянием или состоянием при наведении: 

#myDIV {
background-image: url(icons/homeBlack.png);
}

#myDIV:hover {
background-image: url(icons/homeWhite.png);
}

но мне нужно сделать две другие вещи: 1) при нажатии на элемент следует использовать третье изображение 

 $("#myDIV").click(function(event){

// change this button
$(this).css("background-image", "url(icons/homeBlue.png)");

});

2) при повторном щелчке не следует снова применять третье изображение, поскольку оно уже применено, поэтому необходимо проверить, было ли оно применено

Мои вопросы: 1) я просто где-то пропускаю трюк css или Jquery - лучший способ сделать это? 2) можно проверить, какое фоновое изображение установлено и как?

Кажется, я не могу найти в JQuery ничего, что позволило бы мне определить, какое изображение находится "в данный момент" на месте.

Заранее спасибо за любую помощь.

1 Ответ

0 голосов
/ 19 февраля 2011

Создайте 3 CSS-класса: 

.state_1 {background-image: url(icons/homeBlack.png)}
.state_2 {background-image: url(icons/homeWhite.png)}
.state_3 {background-image: url(icons/homeBlue.png)}

Затем, когда вы хотите проверить состояние DIV, используйте, например: 

     if ($('#myDIV').hasClass('state_3')) {......}
else if ($('#myDIV').hasClass('state_2')) {......}
else                                      {......}

Чтобы изменить изображение, просто измените класс,например, 

$('#myDIV').removeClass('state_1 state_3').addClass('state_2');

Вам придется обрабатывать события hover в jQuery, а не только в CSS, если, конечно, вы не можете использовать модификаторы css ": hover", ": visit"

...