jQuery切换到更改图像
我有一个包含图像的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 Sprites确实是这样做的方式，但为了完整性，这是另一种选择。
通常我是最后一个达到正则表达式的人，但我认为他们会在这里提供帮助
$('.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://sofzh.miximages.com/jquery/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://sofzh.miximages.com/jquery/ br 使用：$（’。swapimg’）。swapimg（）; br opt：$（’。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);