1

jQuery を使用してラジオ ボタンのスタイルを設定しました。すべてのラジオ ボタンを独自の画像とクリックされた画像にしたいと考えています。しかし、現在、私は普遍的に2つの画像だけを使用しています.

コードはjsFiddleで表示できます。

今、私はちょうど持っています

var checkedImgUrl = 'http://b.vimeocdn.com/ps/879/87952_300.jpg',
    uncheckedImgUrl = 'http://www.mediabistro.com/alltwitter/files/2011/03/twitter_block.gif';

これらの画像のそれぞれに独自の画像とクリックされた画像を持たせるにはどうすればよいですか?

4

1 に答える 1

2

これを行う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");
于 2012-07-06T05:01:50.413 に答える