Question

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

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

这是虚构图片的小提琴：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>

Answer 1

您可以使用 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>

Answer 2

您可以扩展代码以保留所选的值对，并使用这两个值在对象中查找图像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

Answer 3

兴趣点是：

$(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>

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

3 个答案: