javascript - jquery - 问题检查/样式单选按钮用 anchor 包裹它

Question

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

我正在创建一个名为“Stylize”的简单函数(实际上我只在 firefox 上尝试过它，但我会让它在 IE6/7 和主要浏览器的早期版本中运行)。

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

Here is the fiddle包含一个简单的例子。我已经用 Firebug 分析了属性。实际上它不接受每个单选按钮的不同类名，但这是下一步。如您所见，我正在研究的解决方案是用 anchor 标记包裹单选按钮，然后绑定(bind)一个 onclick 事件处理程序来选择它的单选按钮。

我该怎么做才能让它正常工作？ 谢谢你，亚历克斯。

Answer 1

这是一个工作示例:http://jsfiddle.net/bFYW6/2/

您的问题很简单:您调用了 var wrapper = $(radio).parent();在实际包装 radio 元素之前。因此，.parent()引用 <form>元素，而不是 <a>你继续包装 radio中的元素。

我所做的就是调换这两行的顺序，瞧!

您可以进行的另一项更改是对实际绑定(bind)包装器上的单击事件的最后一行。而不是:

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

你可以这样做:

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

通过使用 $(this)在上面的例子中，它总是会找到 radio元素是它的 child 。这使您可以调用 Stylize()只运行一次:Stylize("#radio1, #radio2");或 Stylize("input[type=radio]"); .

示例:http://jsfiddle.net/bFYW6/6/

最后一点，您不应该为您的 Stylize() 使用大写“S”功能。在 JavaScript 中以大写字母开头的函数通常表明它是类的构造函数，而您的不是。