Question

想象一下，您可以在网上购买定制服装。要求用户为他的新T恤选择两种颜色：主色和次要色。这是由2个放射性组完成的。根据用户选择的颜色，将显示一个图像，以所选颜色显示衬衫。

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

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

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

现在我想在我的网站上显示图像，具体取决于这两个组的组合。

即：用户从组1中选择A，从组2中选择B - ＆gt; display image1

即：用户从组1中弹出A，从组B弹出A - ＆gt;显示图像2

即：用户从组1中选择B而从组B中选择任何东西 - ＆gt;显示图像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" />

关于如何做到这一点的任何想法？！经过三天的思考和谷歌研究，到目前为止我什么都没有:( 也许需要Java数组？我愿意接受建议：）

Answer 1

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

Changing the image source using jQuery

我会标准化图像的名称（如果你有这样的控制级别），这样你就可以根据所选的单选按钮（例如Shirts-Red-Large.jpg）形成图像名称，否则你可以使用Ajax query查找相应的图片网址。

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

1 个答案: