我的div与图像列表在其中：jQuery的切换来改变图像
<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添加到图像中？
谢谢！
FWIW，我建议你用普通的CSS和background-image来做这个。这听起来对我来说这不是很正常的图像，而是“按钮”。
$('.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;
}
});
抱歉，“x”表示图像的名称，所以它会是nyt，theguardian等。 ..可以通过jQuery选择？ – hejog 2009-06-30 09:57:52
也许CSS sprites会适合你吗？
这将节省您每次加载一个独立的图像，你点击图片（按钮？），你可以通过添加和删除一个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');
}
}
);
当用户点击按钮时，两种状态都会被加载并准备好哦，并且您减少了您的请求，这总是一个好主意:) – Tom 2009-06-30 10:42:45
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'));
}
});
我发现这个插件做同样的事情对你有用问：
$("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/
我创建PL ugin swapimg：http://xuannd.wordpress.com/2010/12/03/jquery-swap-images-easy/
use：$（'。swapimg'）。swapimg（）;
opt：$（'。swapimg'）。swapimg（{imgOn：“_ on.png”，imgOff：“。png”}）;
每个“按钮”有不同的图像[和不同的切换图像]？ – hejog 2009-06-30 09:45:54
我不知道有多少图片，但如果只有少数图片，我建议的方法仍然有效 - 只需应用另一个类，例如“one”，“two”or“three”取决于按钮所处的状态。 – 2009-06-30 09:54:19