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

Question

所以我在一个网站上工作，不知道从哪里开始使用 jquery。

有 2 种形式，一种有 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

您可以创建一个 函数 来映射和过滤 选中 单选按钮并呈现与其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

Answer 2

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

$('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 显示组合文件名，并且我还为衬衫和裤子设置了默认值，以防止出现未定义的错误。