我曾与他们的图像的div的列表:
<div class="wizard-img"><%= image_tag("sources/pix/nyt.png") %></div>
<div class="wizard-img"><%= image_tag("sources/pix/theguardian.png") %></div>
当用户点击的div,我想它的形象改变为X-on.png,再次点击时,它会改变为X-off.png,并单击第三时候应该转换为x。 PNG。
是否有可能做到这一点,而无需手动指定jQuery的每个图像的变化? 我可以遍历div和发现映像名称,并简单地追加-off / -on的形象呢?
谢谢!
也许CSS精灵会为你工作?
这将节省您从您点击图片每次加载一个独立的图像,你可以通过添加和删除一个CSS类,如解决你的问题(按钮):
$('.wizard-img').click(
function() {
if ($(this).hasClass('on')) {
$(this).removeClass('on').addClass('off');
} else if ($(this).hasClass('off')) {
$(this).removeClass('off');
} else {
$(this).addClass('on');
}
}
);
http://docs.jquery.com/Events/toggle
$(".wizard-img").toggle(
function () {
$(this).find("img").attr({src:"x-on.png"});
},
function () {
$(this).find("img").attr({src:"x-off.png"});
},
function () {
$(this).find("img").attr({src:"x.png"});
}
);
CSS精灵确实是这样做的方式,但只是为了完整性,这里的另一种选择。
通常情况下,我最后达到一个正则表达式,但我认为他们会在这里帮助
$('.wizard-img').click(function() {
var $img = $(this).find('img') ,
src = $img.attr('src') ,
onCheck = /\-on\.jpg$/ ,
offCheck = /\-off\.jpg$/ ,
normal = /\.jpg$/
;
if(src.match(onCheck)) {
$img.attr('src', src.replace(onCheck, '-off.jpg'));
} else if (src.match(offCheck)) {
$img.attr('src', src.replace(offCheck, '.jpg'));
} else {
$img.attr('src', src.replace(normal, '-on.jpg'));
}
});
FWIW,我建议你使用这个简单的CSS和做background-image
。 这听起来对我来说,这是不是真的正常图像,而“按钮”。
我发现这个插件做同样的事情你问什么有用:
http://www.malsup.com/jquery/cycle/
$('.wizard-img').click(function() {
var img = $(this).find('img');
var src = img.attr('src');
//image is neither on nor off, so change src to on and return
if(src != 'x-on.png' && src != 'x-off.png') {
img.attr('src','x-on.png');
return false;
}
//image is on, so change src to off and return
if(src == 'x-on.png') {
img.attr('src','x-off.png');
return false;
}
//image is off, so change src to x and return
if(src == 'x-off.png') {
img.attr('src','x.png');
return false;
}
});
$("img").hover(
function() { this.src = this.src.replace("_Off", "_On");},
function() { this.src = this.src.replace("_On", "_Off");
});
http://kaidez.com/tutorial-simple-effective-jquery-image-rollover/
我创建插件swapimg: http://xuannd.wordpress.com/2010/12/03/jquery-swap-images-easy/
使用方法:$( 'swapimg。')swapimg()。
选择:$( 'swapimg')swapimg({imgOn: “_ on.png”,imgOff: “PNG。”});
(function($){
$.fn.swapimg=function(options){
var defaults={imgOn:"_on.gif",imgOff:".gif"};
var options=$.extend(defaults,options);
var $isOn=false;
var $obj_index=-1;
return this.each(
function(){
if($(this).is('img')){
obj=$(this)
}
else{
obj=$(this).find('img')
}
obj.hover(
function(){
if(this.src.indexOf('_on')==-1){
$isOn=false
}else{
$isOn=true
}
if($isOn==false){
this.src=this.src.replace(options.imgOff,options.imgOn)
}
},
function(){
if($isOn==false){
this.src=this.src.replace(options.imgOn,options.imgOff)
}
}
)
}
)
}
})(jQuery);