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');
}

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

希望这有帮助！

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

1 个答案: