jquery - アンカーでラッピングするラジオボタンのチェック/スタイリング

Question

jqueryでラジオボタンをカスタマイズしようとしています。 解決策がたくさんあることは知っていますが、ラジオボタンごとに異なる画像を設定する必要があります。これはラベルの説明がないので必要です。各ラジオボタンの意味を理解するためにスタイルを設定する必要があります（例：2つのラジオボタン、「$」を含む画像と優先通貨を確認する「€」）。

私は「Stylize」という単純な関数を作成しています（実際はFirefoxでのみ試してみましたが、IE6/7やそれ以前のバージョンのメジャーブラウザには対応します）。

ところで、関数が期待どおりに機能していないように見えるのは、チェックされた属性をすべてのラジオボタンに設定して、奇妙な結果を与えるためです。簡単な例を含む

Here is the fiddle私は火かき棒で属性を分析しました。実際には、ラジオボタンごとに異なるクラス名を受け入れませんが、これが次のステップです。ご覧のとおり、私が取り組んでいる解決策は、アンカータグでラジオボタンをラップし、そのラジオボタンを選択するためにonclickイベントハンドラをバインドすることです。

正しく動作させるにはどうすればよいですか？ ありがとう、アレックス。

Answer 1

はここで働い例です：http://jsfiddle.net/bFYW6/2/

あなたの問題は非常に簡単だった：あなたは、実際にラジオ要素をラップする前にvar wrapper = $(radio).parent();と呼ばれます。したがって、あなたがradio要素をラップするようになった<form>要素、ない<a>に言及した。

私がしたすべての.parent()は、これら二つのラインと出来上がりの順序を切り替えるでした！

ラッパーのclickイベントを実際にバインドする最後の行に変更することもできます。いうより：

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

あなたが行うことができます：

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

上記の例では$(this)を使用することにより、それは常に、それは子供のいるradio要素を見つけます。これにより、関数を1回呼び出すことができます：Stylize("#radio1, #radio2");またはStylize("input[type=radio]");。

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

最後のポイントとして、あなたはStylize()機能のための資本「S」を使用しないでください。 JavaScriptで大文字で始まる関数を作成することは、一般的に、それがあなたのクラスではないクラスのコンストラクタ関数であることを示唆しています。