1

カスタム服を購入できるウェブショップを想像してみてください。ユーザーは、新しいTシャツにプライマリカラーとセカンダリカラーの2種類の色を選択するように求められます。これは2つの無線グループによって行われます。ユーザーが選択した色に応じて、選択した色でシャツを示す画像が表示されます。

私の問題は非常に似ているので、もう少し抽象的に説明します。

私のウェブサイトには2つのラジオグループがあり、それぞれに4つのラジオボタンがあります。

group 1: A B C D, 
group 2: A B C D

次に、これら2つのグループの組み合わせに応じて、自分のWebサイトに画像を表示したいと思います。

つまり、ユーザーはグループ1からAを選択し、グループ2からBを選択します->image1を表示します

つまり、ユーザーはグループ1からAを選択し、グループBからAを選択します->画像2を表示します

つまり、ユーザーはグループ1からBを選択し、グループBからは何も選択しません->画像3を表示

など...

Primary color:
<label><input type="radio" name="Color1" value="red" id="Color1_0" />Red</label>
<label><input type="radio" name="Color1" value="green" id="Color1_1" />Green</label>
<label><input type="radio" name="Color1" value="blue" id="Color1_2" />Blue</label>
<label><input type="radio" name="Color1" value="champagne" id="Color1_3" />Champagne</label>


Secondary color:
<label><input type="radio" name="Color2" value="red" id="Color2_0" />Red</label>
<label><input type="radio" name="Color2" value="blue" id="Color2_1" />Blue</label>
<label><input type="radio" name="Color2" value="purple" id="Color2_2" />Purple</label>
<label><input type="radio" name="Color2" value="champagne" id="Color2_3" />Champagne</label>

<img id="customimage" src="images/image1.jpg" />

これを行う方法についてのアイデアはありますか？！3日間の思考とGoogleの調査の後、これまでのところ何もありません:(多分Java配列が必要になるでしょう??私は提案を受け付けています:)

4

1 に答える 1

0

jQuery (または同様のフレームワーク) を使用して、ラジオ ボタンの選択が変更されるたびに JavaScript でイベントを取得し、新しく選択された画像の URL でイメージ タグを更新できます (ここでも jQuery などを使用)。

jQuery を使用して画像ソースを変更する

選択したラジオ ボタン (例: Shirts-Red-Large.jpg) だけに基づいて画像名を作成できるように、画像の名前を標準化します (そのレベルの制御がある場合)。Ajax クエリを使用した画像 URL 。

于 2012-06-11T00:51:35.530 に答える