显示基于多个单选按钮选择的图像

Display an Image based on multiple radio button selections

本文关键字：图像 选择 单选按钮 于多个 显示      更新时间：2024-04-05

我刚开始做一个项目，我相信我可以毫无问题地编写大部分代码。困扰我的是如何使用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函数也是如此。

你知道，我完全错了，不应该在周五的一天结束时，就在去产科病房之前，尝试做这些蠢事。。。

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

  • 如果你所做的选择会极大地影响图像的外观，那么你可以简单地为每一个可能的结果创建一个图像，并使用命名约定保存它们，该约定表示需要选择哪些选项才能获得它（例如：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');
}

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

希望这能有所帮助！

相关文章：