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

Question

我正在尝试使用 2 组单选按钮分组更改为 2 组不同的图像。如果只存在一组单选按钮，我的代码将更改一组图像。当我添加第二组单选按钮时，两组单选按钮仅更改 1 个图像组。对不起，如果我没有意义。

广播组 1

<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

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

这是第 1 组的 jQuery

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

这是第 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")'});
    }
    });

这是该网站的链接：http://www.nationalbatcompany.com/products/t-ball-bat/

如果您点击自定义您的球棒，您将看到枪管和手柄颜色。如果您单击桶样本颜色，桶图像将会改变，如果您点击手柄颜色，桶颜色也会改变。这不是预期的功能。单击手柄图像样本时，手柄颜色应更改

任何帮助将不胜感激。

Answer 1

好吧，看了你的代码一段时间后，我不知道为什么它不起作用。问题出在事件绑定中，或者更有可能出在 html 中（因为单击句柄的所谓不相关复选框会更改完全不同的图像和位置的 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")'});
    }
});

然后只需在其中放一个开关即可交换 bat 文本颜色。总之祝你好运！