javascript - 使用 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

您可以这样做的一种方法是向包含图像 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 仅将“选中”图像更改为自定义图像。您现在应该有足够的信息来扩展它以完成您的查询。这是我在 swapImage 函数中所做的唯一代码更改:

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