根据多个单选按钮选择显示图像

Question

我刚开始从事一个项目，我相信我可以毫无问题地编写大部分代码。困扰我的是如何让两组单选按钮使用 javascript/jQuery 协作以显示单个图像。

我有两组单选按钮。第一组用户将选择一个数字选项。第二组是一种乘数。然后逻辑应该查看第 1 组中的哪个按钮（大约 20 个选项）被选中，然后查看第 2 组（大约 5 个选项）中的哪个选项被选中，然后显示特定图像。

有什么想法吗？

编辑/更新：

我想确保我能拿回我所拥有的东西，抱歉，在我今天匆匆忙忙之前没有放任何东西。这是一个我需要在 1 月 5 日之前完成的项目，但我知道下周我需要尝试一下……这周我要生孩子了（好吧，我妻子正在生孩子）。试图清除优秀的东西。

这就是我所拥有的并且正在尝试做的......

    <script class="jsbin" src="http://ajax.googleapis.com/ajax/libs/jquery/1.5.1/jquery.min.js"></script>


<script type="text/javascript">
$(function(){     
  $('.Group1').click(function(){
    if ($(this).attr("id") == "A" && $(this).attr("id") == "A" )
    {
      $('#DISPLAY').show();
    } 
    });
});

$(function(){     
  $('.Group2').click(function(){
    if ($(this).attr("id") == "1" && $(this).attr("id") == "1" )
    {
      $('#DISPLAY').show();
    } 
    });
});
</script>


<form name="form1" id="form1">
    <ul>
        <li><input type="radio" name="Group1" id="A" value="A" class="Group1" />A</li>
        <li><input type="radio" name="Group1" id="B" value="B" class="Group1" />B</li>
        <li><input type="radio" name="Group1" id="C" value="C" class="Group1" />C</li>
        <li><input type="radio" name="Group1" id="D" value="D" class="Group1" />D</li>
        <li><input type="radio" name="Group1" id="E" value="E" class="Group1" />E</li>
        <li><input type="radio" name="Group1" id="F" value="F" class="Group1" />F</li>
        <li><input type="radio" name="Group1" id="G" value="G" class="Group1" />G</li>
        <li><input type="radio" name="Group1" id="H" value="H" class="Group1" />H</li>
    </ul>

    <ul>
        <li><input type="radio" name="Group2" id="1" value="1" class="Group2" checked="checked" />1</li>
        <li><input type="radio" name="Group2" id="2" value="2" class="Group2" />2</li>
        <li><input type="radio" name="Group2" id="3" value="3" class="Group2" />2</li>
        <li><input type="radio" name="Group2" id="4" value="4" class="Group2" />2</li>
        <li><input type="radio" name="Group2" id="5" value="5" class="Group2" />2</li>
    </ul>
</form>


<div id="DISPLAY">
    <IMG src="images/barendstart.png" />
</div>

我遇到的问题是我不知道如何轻松引用第二组以使上面的复合 if 语句在 Group1.click 函数中工作。现在它只是两次验证同一个单选按钮。 Group2.click 函数也是如此。

你知道我完全错误地处理了这个问题，不应该在周五结束时在去 OB 病房之前尝试做这些废话......

Answer 1

这实际上取决于您要显示的图像类型以及不同选项对它们的影响。我会推荐以下两个选项之一：

• 如果您所做的选择将极大地影响图像的外观，那么您可以简单地为每个可能的结果创建一个图像，并使用一个命名约定来保存它们，该命名约定表示需要选择哪些选项才能获得它（例如.: 1-woodfinish.jpg, 2-woodfinish.jpg)
• 如果图像几乎相同，或者当您更改选项时只有部分图像发生变化，您可以使用基本背景图像并在其上覆盖多个包含变化部分的图像（每个选项一个）。这将要求您制作更少的图像，但仅适用于某些情况。

这两个选项都不是超级有效，但它们肯定会让您快速启动并运行。至于实现解决方案的代码：

$('input[name=radio-group1], input[name=radio-group2]').change(function(){
    $('#image').prop('src', $('input[name=radio-group1]:checked').val() + '-' + $('input[name=radio-group2]:checked').val() + '.jpg');
}

这将根据所选选项更改图像源的文件名。

希望这会有所帮助！