使用Jquery的单选按钮图像

Question

我用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';

如何让这些图像中的每一个都有自己独特的图像和点击图像？

Answer 1

你可以这样做的一种方法是在你的无线电按钮上添加一个属性来保存图像网址，例如：

<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仅将“已检查”图像更改为自定义图像。您现在应该有足够的信息来扩展此信息以完成您的查询。这是我在swapImage函数中做的唯一代码更改：

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