我的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