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>

有两个表单字段＆＃34; color＆＃34;和＆＃34;表格＆＃34;使用单选按钮决定要显示的图像。选择颜色就像小提琴一样。

如果用户现在检查第二个字段中的三角形（名称=＆＃34;表格＆＃34;）我想要显示一个白色三角形。如果他检查黑色＆＃34;颜色＆＃34; ＆＃34; round＆＃34;在表单中，它应该将img src更改为black_round.jpg等等。

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

感谢您的帮助！

Answer 1

你应该采取“图像名称必须像black_round.jpg，black_triangle.jpg，white_round.jpg，white_triangle.jpg”，以便在你的情况下使用以下代码段。

请查看以下代码段以获取更多信息。您应该通过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>

jQuery：多个单选按钮字段的IF条件？

1 个答案: