使用jquery的單選按鈕圖像

我使用jQuery設計了單選按鈕，我想讓每個單選按鈕都有自己獨特的圖像並單擊圖像。但現在我只用兩個圖像爲他們普遍。使用jquery的單選按鈕圖像

該代碼可以在jsFiddle查看。

現在，我只是有

var checkedImgUrl = 'http://b.vimeocdn.com/ps/879/87952_300.jpg', 
    uncheckedImgUrl = 'http://www.mediabistro.com/alltwitter/files/2011/03/twitter_block.gif';

我怎樣才能讓每一個這些圖像的一個有自己獨特的形象和點擊圖片？你可以這樣做

來源

2012-07-06 mystycs

你通過獨特的形象 – 2012-07-06 04:24:48

每個無線設備都有自己的形象是什麼意思，現在他們都共享一個圖像。 – mystycs 2012-07-06 04:26:03

@soniccool - 當然他們分享相同的圖像。你在期待什麼？ – 2012-07-06 04:30:57

的一種方法，是將屬性添加到您的單選按鈕，其保持圖像的URL，例如：

<input name="version" type="radio" value="ATT" data-imageurl="radioimage1" />

然後在jQuery代碼，你可以參考IMAGEURL這樣的：

uncheckedImgUrl = $(this).attr("data-imageurl") + '.jpg';

如果您自己託管圖片，則可以在文件末尾保存文件的「選定」版本，其格式爲'-on'。像這樣：

checkedImgUrl = uncheckedImgUrl + '-on.jpg';

希望這有助於

編輯：http://jsfiddle.net/dGWJp/30/

我只是做了小小的改動的jsfiddle因爲我懶得爲例創建圖像。這個jsfiddle只會將'checked'圖像更改爲自定義圖像。現在您應該有足夠的信息來展開以完成您的查詢。這是唯一的代碼改變我做swapImage函數內部：

checkedImgUrl = $(radio).attr("data-imageurl");

來源

2012-07-06 05:01:50 jzm

你認爲你可以將它整合到這個jsfiddle中來向我展示一個例子嗎？ – mystycs 2012-07-06 05:02:43

只需用他的代碼替換圖像變量的實例... – sachleen 2012-07-06 05:04:54

好吧我會嘗試它！謝謝:) – mystycs 2012-07-06 05:05:11

使用jquery的單選按鈕圖像

回答

相關問題