Jquery 如何使用两组单选按钮更改2个图像

我正在尝试使用两组单选按钮分组来更改为两组不同的图像。如果只存在一组单选按钮，我的代码将更改一组图像。添加第二组单选按钮时，两组单选按钮仅更改一个图像组。对不起，如果我说不通的话

第一广播组

<input type="radio" name="barrel" class="color-picker" id="Black" value="Black" />
<input type="radio" name="barrel" class="color-picker" id="Carolina_Blue" value="Carolina_Blue" />
<input type="radio" name="barrel" class="color-picker" id="Charcoal" value="Charcoal" />

下面是组2的jQuery

    jQuery('input:radio[name="handle"]').change(function(){
    if ($(this).prop("checked") && $(this).val() == 'Black'){
        jQuery('.handle').css({'background-image':'url("http://www.nationalbatcompany.com/wp-content/themes/nationalbat/images/bats/handles/black-handle.png")'});
    }
    else if ($(this).prop("checked") && $(this).val() == 'Carolina_Blue'){
        jQuery('.handle').css({'background-image':'url("http://www.nationalbatcompany.com/wp-content/themes/nationalbat/images/bats/handles/carolina-blue-handle.png")'});
    }
    else if ($(this).prop("checked") && $(this).val() == 'Charcoal'){
        jQuery('.handle').css({'background-image':'url("http://www.nationalbatcompany.com/wp-content/themes/nationalbat/images/bats/handles/charcoal-handle.png")'});
    }
    });

以下是该网站的链接：

如果你点击自定义你的球拍，你会看到桶和手柄的颜色。如果单击“桶”样例颜色，桶图像将更改，如果单击控制柄颜色，桶颜色也将更改。这不是预期的功能。单击控制柄图像样例时，控制柄颜色应更改

---

任何帮助都将不胜感激。

好吧，在看了你的代码一段时间后，我不知道它为什么不起作用。问题要么是在事件绑定中，要么更可能是在html中（因为单击假定不相关的句柄复选框会更改bat，而bat是一个完全不同的图像和位置）。底部的复选框被绑定，就好像它们是顶部的一样。我会让你再深入一点

我可以提供一件事来帮助您进行常规调试/代码结构，您可以将桶颜色更改代码简化为更紧凑的形式，如下所示：

jQuery('input:radio[name="handle"]').change(function(){
    var color = $(this).val().toLowerCase();
    if ($(this).prop("checked")){
        jQuery('.handle').css({'background-image':'url("http://www.nationalbatcompany.com/wp-content/themes/nationalbat/images/bats/handles/' + color + '-handle.png")'});
    }
});

---

然后在那里扔一个开关来交换蝙蝠文本的颜色。无论如何，祝你好运

不用链接到网站，你可以做一把小提琴谢谢迈克，但是class.handle和.barrel是正在改变的。如果您引用该站点的URL，您将看到纯bat图像实际上是两个独立的图像。所以您的解决方案不起作用。@JosephGarcia实际上……一个问题：如何填充表单？它是在后处理中动态生成的吗？

    jQuery('input:radio[name="handle"]').change(function(){
    if ($(this).prop("checked") && $(this).val() == 'Black'){
        jQuery('.handle').css({'background-image':'url("http://www.nationalbatcompany.com/wp-content/themes/nationalbat/images/bats/handles/black-handle.png")'});
    }
    else if ($(this).prop("checked") && $(this).val() == 'Carolina_Blue'){
        jQuery('.handle').css({'background-image':'url("http://www.nationalbatcompany.com/wp-content/themes/nationalbat/images/bats/handles/carolina-blue-handle.png")'});
    }
    else if ($(this).prop("checked") && $(this).val() == 'Charcoal'){
        jQuery('.handle').css({'background-image':'url("http://www.nationalbatcompany.com/wp-content/themes/nationalbat/images/bats/handles/charcoal-handle.png")'});
    }
    });

jQuery('input:radio[name="handle"]').change(function(){
    var color = $(this).val().toLowerCase();
    if ($(this).prop("checked")){
        jQuery('.handle').css({'background-image':'url("http://www.nationalbatcompany.com/wp-content/themes/nationalbat/images/bats/handles/' + color + '-handle.png")'});
    }
});