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

我的表单应该显示基于在两个不同字段中选择的单选按钮（形式为&颜色）的图像。jQuery语法的条件逻辑与单选按钮？

我已经成功地创建了带有链接的对象作为每个属性的值。现在我如何告诉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>

来源

2016-07-28 MrSocrathes

我觉得在你的小提琴对象不为您服务您的解释基础这里需要。对象应该包含如下组合： 'images = {silverround：“link1”，silveroval：“link2”，....} – CardCaptor

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

来源

2016-07-28 20:39:03 EspA

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

来源

2016-07-28 20:52:25 trincot

谢谢！这工作非常好！如果我要添加第三个选项，如“大小” - 我是否可以遵循相同的逻辑，并以与您相同的方式添加它？我认为它变得相当复杂......我会将它添加到与颜色相同的“级别”上吗？ – MrSocrathes

你将不得不在你的'图像'对象中添加一层对象嵌套。另一种方法是在图像文件名称中遵循严格的命名约定。像'silver-oval-big.png'一样，确保名称中的部分与单选按钮的值完全一致。然后，您可以生成图像文件名称而不需要* images *对象。 – trincot

感兴趣的一点是：

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

来源

2016-07-28 20:57:08 gaetanoM

非常感谢你！但无论如何，检查圆形或椭圆形时都不会发生任何事情。只有颜色才能更改图像。 – MrSocrathes

@MrSocrathes Snippet已更新。 – gaetanoM

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

回答

相关问题