Show/Hide 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

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

$('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" />
...

然后在事件函数中你可以通过using.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

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

注意每个表单的第一个radio按钮是checked

Show/Hide div 基于所选单选按钮的组合

Show/Hide div based on combination of selected radio buttons

javascript

forms

jquery

radio-button