如何使用兩組單選按鈕更改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中（因為單擊所謂不相關的句柄復選框會更改整個圖像和位置完全不同的蝙蝠）。 底部的復選框就像頂部一樣被綁定。 我讓您進一步了解一下。

我可以提供幫助以幫助進行一般調試/代碼結構的一件事，您可以減少桶顏色更改代碼，使其更加緊湊，如下所示：

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

然后只需在其中放置一個開關即可交換蝙蝠文本的顏色。 無論如何，祝你好運！