Как мне изменить 2 изображения с двумя наборами переключателей

Question

Я пытаюсь изменить на 2 разных набора изображений, используя два набора групп переключателей. Мой код изменит одну группу изображений, если существует только один набор переключателей. Когда я добавляю переключатели второго набора, оба набора переключателей меняют только одну группу изображений. Извините, если я не имею смысла.

Радио группа 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" /> 

Вот мой JQuery для группы 1

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

Вот JQuery для группы 2

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

Затем просто бросить переключатель в там, чтобы поменять местами цвета bat-текста. В любом случае удачи!