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中（因为点击句柄的所谓不相关的复选框会更改完全不同图像和位置的蝙蝠）。底部的复选框被绑定，就像它们是顶部一样。我会让你再说一遍。

我可以提供一些帮助一般调试/代码结构的东西，你可以减少桶颜色变化代码，使其更加紧凑：

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

然后只需在其中放置一个开关即可交换蝙蝠文字颜色。无论如何祝你好运！

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

1 个答案: