Question

我正在尝试使用jquery自定义单选按钮。我知道有很多解决方案在那里工作，但我需要为每个单选按钮设置不同的图像。这是必需的，因为没有标签描述，因此每个单选按钮必须设置样式以理解其含义（例如：两个单选按钮，一个带有包含“$”的图像和一个“€”以检查首选货币）。

我正在创建一个名为“Stylize”的简单函数（实际上我只在firefox上尝试过它，但我会让它适用于IE6 / 7和以前版本的主流浏览器）。

顺便说一下，该函数似乎没有按预期工作，因为它在所有单选按钮上设置了checked属性，给出了一个奇怪的结果。

Here is the fiddle包含一个简单示例。我用firebug分析了这些属性。实际上它不接受每个单选按钮的不同类名，但这是下一步。正如您所看到的，我正在处理的解决方案是使用锚标记包装单选按钮，然后绑定onclick事件处理程序以选择其单选按钮。

如何才能使其正常工作？谢谢，Alex。

Answer 1

以下是一个有效的例子：http://jsfiddle.net/bFYW6/2/

你的问题非常简单：你在实际包装无线电元素之前调用了var wrapper = $(radio).parent();。因此，.parent()引用了<form>元素，而不是<a>所包含的radio元素。

我所做的就是切换这两行的顺序，瞧！

您可以进行的另一项更改是实际绑定包装器上的click事件的最后一行。而不是：

$(wrapper).click(function() {
    $(radio).attr("checked", true);
});

你可以这样做：

$(wrapper).click(function() {
    $(this).children().attr("checked", true);
});

通过在上面的示例中使用$(this)，它始终会找到它是孩子的radio元素。这样您就可以只调用一次Stylize()功能：Stylize("#radio1, #radio2");或Stylize("input[type=radio]");。

最后一点，你不应该为你的Stylize()函数使用大写'S'。在JavaScript中使用大写字母开始一个函数通常表明它是一个类的构造函数，而不是你的类。