JQuery在三态图标/按钮中标识当前的CSS背景图像？

我有三个图像被用来表示一个应用程序图标状态，我正在尝试使用css来做到这一点。JQuery在三态图标/按钮中标识当前的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）如果再次点击，它不应该再次应用第三个图像，因为它已经被应用 - 所以它需要检查它是否已经被应用

我的问题s是： 1）只是我错过了一个css技巧的地方或是jquery最好的方式来做到这一点？ 2）我可以检查哪个背景图像到位以及如何？

我似乎无法在JQuery中找到任何可以让我确定哪个图片“当前”就位的东西。

在此先感谢您的帮助。

来源

2011-02-18 T9b

我很困惑，会发生什么当它被点击时，你悬停然后鼠标移出。我猜测它恢复到被点击之前的状态。 – 2011-02-18 23:42:29

意外发布，而不是评论...希望他们删除帖子，因为它不是一个真正的答案。无论如何：你看过jQuery tristate复选框插件吗？ http://code.google.com/p/jquery-tristate-checkbox/ 您可以更改所有您想要的绑定（并且从需要无序列表中轻松更改） – iivel 2011-02-18 23:48:03

创建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');

你必须处理jQuery的悬停事件，而不仅仅是CSS，当然，除非你可以使用CSS修饰符“：徘徊”，“：访问”

来源

2011-02-19 00:06:26 Neil

JQuery在三态图标/按钮中标识当前的CSS背景图像？

回答

相关问题