带有单选按钮的条件逻辑的jQuery语法

我的表单应该显示基于在两个不同字段（表单和颜色）中选择的单选按钮的图像。

我已经设法创建了具有链接的对象作为每个属性的值。现在，如果我选择gold+round，我如何告诉jQuery更改#image的来源？

下面是一张假照片：https://jsfiddle.net/fbzf10x6/10/

<body>
  <form action="">
 <input type="radio" name="color" value="silver"> silver
<br>
<input type="radio" name="color" value="gold"> gold
<br>
<input type="radio" name="color" value="platin"> platin
<br> <br>
<input type="radio" name="form" value="round"> round
<br>
<input type="radio" name="form" value="oval"> oval
<br>
</form>
<div><img id="image" src="#"></div>
</body>

您可以使用onClick方法和JavaScript函数来重新加载图像元素的src属性值。

下面是一个快速示例：

<html>
        <head>
        <script type='text/javascript'>
        function reloadImgSrc(value) {
            document.getElementById('image').innerHTML = '<img src="/img/'+value+'.jpg"  />';
        }
        </script>
        </head>
        <body>
          <form action="">
            <input type="radio" name="color" value="silver" onclick="reloadImgSrc('silver')"> silver
            <br>
            <input type="radio" name="color" value="gold" onclick="reloadImgSrc('gold')"> gold
            <br>
            <input type="radio" name="color" value="platin" onclick="reloadImgSrc('platin')"> platin
        </form>
        <div id="image"></div>
        </body>
</html>

您可以扩展代码以保留所选的一对值，并使用这两个值在对象中查找图像URL：

var current = {
  color: 'silver', form: 'oval'
}
$(document).ready(function() {
  $("input[name=color],input[name=form]").change(function() {
    current[this.name] = this.value;
    $('#image').stop().fadeOut(200, function() {
      $(this).attr('src', images[current.form][current.color]);
    }).fadeIn(200);
  });
});

JS Fiddle

兴趣点是：

$(this).attr('src', paths[images]);

路径未定义。

如果在更改处理程序中没有选择带名称表单的输入，我更喜欢设置第一个，因此之后我可以处理正确的图像：images[formChecked][colorChecked]。

我的片段：

var images = {
  oval: {
    silver: "http://www.polyvore.com/cgi/img-thing?.out=jpg&size=l&tid=38201084",
    gold: "http://images.betteridge.com/images/products/standard/BCA-16-17-14kt-yellow-gold-oval-signet-ring.jpg",
    platin: "http://thumbs.ebaystatic.com/images/g/09UAAOSwBPNXR3UH/s-l225.jpg"
  },
  round: {
    silver: "http://www.silverringjewelry.com/silver-rings/fine-silver-rings.jpg",
    gold: "https://img0.etsystatic.com/031/1/6658158/il_340x270.596198132_jls1.jpg",
    platin: "http://images.costco-static.com/image/media/350-703887-847__1.jpg"
  }
};
$(document).ready(function () {
  $('input[name="color"]').first().prop('checked', true);
  $('input[name="form"]').last().prop('checked', true);
  
  $('input[name="color"], input[name="form"]').change(function (e) {
    var colorChecked;
    var formChecked;
    if (this.name == "color") {
      colorChecked = this.value;
      formChecked = $('input[name="form"]:checked').val()
    } else {
      colorChecked = $('input[name="color"]:checked').val();
      formChecked = this.value;
    }
    $('#image').stop().fadeOut(200, function () {
      $(this).attr('src', images[formChecked][colorChecked]);
    }).fadeIn(200);
  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form action="">
    <input type="radio" name="color" value="silver"> silver
    <br>
    <input type="radio" name="color" value="gold"> gold
    <br>
    <input type="radio" name="color" value="platin"> platin
    <br> <br>
    <input type="radio" name="form" value="round"> round
    <br>
    <input type="radio" name="form" value="oval"> oval
    <br>
</form>
<div><img id="image" src="http://www.polyvore.com/cgi/img-thing?.out=jpg&size=l&tid=38201084"></div>

相关内容

最新更新

热门标签：