if语句-jQuery:多个单选按钮字段的if条件

Question

https://jsfiddle.net/fbzf10x6/6/

  <form action="">
<input type="radio" name="colour" value="black"> black
<br>
<input type="radio" name="colour" value="white"> white
<br>
<br>
<input type="radio" name="form" value="round"> round
<br>
<input type="radio" name="form" value="triangle"> triangle
<br>

有两个表单字段"color"one_answers"forms"，单选按钮决定显示哪个图像。选择颜色就像小提琴一样有效。

如果用户现在在第二个字段（name="forms"）中检查三角形，我希望显示一个白色三角形。如果他在"color"one_answers"round"中检查了black，则应该将img src更改为black_round.jpg，依此类推

这是一个简化版本。我最终会有很多领域和更多的选择。

谢谢你的帮助！

Answer 1

您应该考虑"图像名称必须像black_round.jpg、black_triangle.jpg、white_round.jpg和white_trianglejpg"，以使以下片段在您的情况下工作。

请查看下面的片段以了解更多信息。您应该通过inspect元素检查图像src，因为当前不会加载任何图像，因此我们当前没有这些图像。但是您可以在服务器上重命名图像名称，并使用此代码进行检查。

$(document).ready(function() {
	var imgname = [];
  $("input[name=colour]").click(function() {
  		imgname['colour'] = $(this).val();
      if(Object.keys(imgname).length == 2){
        $("#image").attr('src',imgname['colour'] +'_'+ imgname['form']+'.jpg');
      }
  });
  
  $("input[name=form]").click(function() {
  		imgname['form'] = $(this).val();
      if(Object.keys(imgname).length == 2){
        $("#image").attr('src',imgname['colour'] +'_'+ imgname['form']+'.jpg');
      }
  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form action="">
    <input type="radio" name="colour" value="black"> black
    <br>
    <input type="radio" name="colour" value="white"> white
    <br>
    <br>
    <input type="radio" name="form" value="round"> round
    <br>
    <input type="radio" name="form" value="triangle"> triangle
    <br>
  </form>
  <div><img id="image" src="http://4.bp.blogspot.com/-MuBXtqpPw7s/T31fChtWOOI/AAAAAAAAAWI/QRpSQv__DcM/s320/black%2B9.png"></div>