根据所选单选按钮的组合显示/隐藏div

Question

所以我正在网站上工作，并且不知道从哪里开始jquery。

有两种形式，一种带有2个单选按钮，另一种带有5个单选按钮。可以显示10种不同的衬衫和裤子组合，但一次只能显示一种，这取决于他们选择的单选按钮的组合。

因此，假设衬衫1是红色，衬衫2是蓝色。裤子1是红色，裤子2是蓝色，裤子3是绿色，依此类推。

所以img11.jpg将是一件红色衬衫和红色裤子。

Img12.jpg将是红色衬衫和蓝色裤子。

img21.jpg是蓝色衬衫和红色裤子。

Img23.jpg是蓝色衬衫和绿色裤子。

（我已经包含了一个图表来更好地展示这一点）！

依此类推。任何人都有任何良好的联系或想帮助实现这一目标吗？

我在javascript或jQuery中没有太多（如果有的话）经验，但这是我的HTML：

<form>
    <input type="radio" id="shirt_Red" name="shirt" value="Red" />
    <input type="radio" id="shirt_Blue" name="shirt" value="Blue" />
</form

<form>
    <input type="radio" id="pants_Red" name="pants" value="Red" />
    <input type="radio" id="pants_Blue" name="pants" value="Blue" />
    <input type="radio" id="pants_Green" name="pants" value="Green" />
    <input type="radio" id="pants_Purple" name="pants" value="Purple" />
    <input type="radio" id="pants_Pink" name="pants" value="Pink" />
</form>

我甚至不确定我是否会使用图片标签或div的背景来执行此操作，具体取决于它如何使用jQuery或javascript。 谢谢！

Answer 1

首先，您需要处理页面中的每个无线电更改事件

$('input[type="radio"]').on("change",function(ev){
     ... 
});

只要用户更改了无线电选择，就会调用此功能。

您需要考虑的下一步是如何选择哪些选项，您可以在jQuery选择器中使用'：checked'

var $shirt = $('input[name="shirt"]:checked');
var $pants = $('input[name="pants"]:checked');

由于您的图像文件具有编号顺序，我建议您将无线电值放在这些数字而不是颜色字符串中，例如：

<input type="radio" id="shirt_Red" name="shirt" value="1" />
<input type="radio" id="shirt_Blue" name="shirt" value="2" />

<input type="radio" id="pants_Red" name="pants" value="1" />
...

然后在事件函数中，您可以使用.val（）：

轻松构造图像文件名

var image_path = 'img'+$shirt.val()+$pants.val()+'.jpg';

最后，使用.attr（）

设置图像文件

$("#id-of-image-tag").attr("src",image_path);

您可以在此处查看合并示例http://jsfiddle.net/4bkngakw/
我做了一些更改，比如使用div显示组合文件名，我还为衬衫和裤子设置了默认值，以防止出现未定义的错误。

Answer 2

您可以创建一个功能，用于映射和过滤已检查的单选按钮，并将与index相关的图像呈现为：

function renderImg(selectors) {
    var img = selectors.filter(function () {
        return $(this).is(":checked")
    }).map(function () {
        return $(this).index() + 1
    }).get();
    $("#result").html('<img src="images/image' + String(img[0]) + String(img[1]) + '.jpg" alt="" />')
}

然后在页面加载时运行功能，每次单选按钮都是checked时：

jQuery(document).ready(function ($) {
    var selectors = $("input[name=shirt], input[name=pants]");
    renderImg(selectors);
    selectors.on("change", function (e) {
        renderImg(selectors)
    })
}); // ready

注意每个表单的第一个广播按钮为checked