根据多个无线电组的组合在网站上显示图像

Question

想象一个可以购买定制服装的网上商店。要求用户为他的新 T 恤选择两种颜色：主色和次色。这是由 2 个无线电组完成的。根据用户选择的颜色，将显示一张图片，显示所选颜色的衬衫。

我的问题很相似，所以我会更抽象地描述一下：

我有 2 个单选组，在我的网站上各有 4 个单选按钮：

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

现在我想在我的网站上显示一张图片，这取决于这两组的组合。

即：用户从组 1 中选择 A，从组 2 中选择 B --> 显示 image1

即：用户从组 1 中选择 A，从组 B 中选择 A --> 显示图像 2

即：用户从组 1 中选择 B，而从组 B 中没有选择 --> 显示 image3

等等……

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" />

关于如何做到这一点的任何想法？！经过三天的思考和谷歌研究，到目前为止我一无所获:( 也许需要一个Java数组？？ 我愿意接受建议:)

Answer 1

您可以使用 jQuery（或类似框架）在每次更改单选按钮选择时在 JavaScript 中获取一个事件，并使用新选择的图像的 URL 更新图像标记（再次使用例如 jQuery）。

Changing the image source using jQuery

我会标准化图像的名称（如果您具有该级别的控制权），以便您可以仅根据选定的单选按钮（例如 Shirts-Red-Large.jpg）形成图像名称，否则您可以使用 Ajax query 查找适当的图像 URL。