Набор цветных наборов индивидуальных атрибутов в JQuery каждый

Question

У меня есть три кнопки на странице, которую я настроил как массив. Я использую $ .each, чтобы проходить через них, а внутри - функция выбора цвета. Я пытаюсь изменить только цвет кнопки (последний) нажатием кнопки, но прямо сейчас, если я нажму на все 3 перед использованием набора цветов, все они меняют цвет. Мне нужно, чтобы кнопка была нажата только для изменения цвета. JSFiddle

var test1 = $('#test1'); 
var test2 = $('#test2'); 
var test3 = $('#test3'); 
var elements = [test1, test2, test3] 

$.each(elements, function(i) { 
    function handler() { 
     $('#color').change(function(){ 
     $(elements[i]).unbind('click', handler); 
     elements[i].css('background-color', this.value); 
     }); 
    } 

    $(elements[i]).bind('click', handler) 

}); 

Answer 1

Ваше решение кажется слишком сложным. Более простым решением может быть следующее:

1. Добавить обработчики кликов на кнопки. Когда нажимается кнопка, добавьте к ней «активный» класс и удалите из других.
2. Привяжите обработчик изменения к цвету. Когда это произойдет, изменить цвет фона активной кнопки:

Я также предполагаю, что вы можете дать класс colorButton к кнопкам:

$('.colorButton').click(function(e) { 
    e.preventDefault(); 
    $('.colorButton').removeClass('active'); 
    $(this).addClass('active'); 
}) 

$('#color').change(function() { 
    $('.colorButton.active').css('background-color', this.value); 
}); 

Работа скрипку: http://jsfiddle.net/wBsab/

Answer 2

Почему бы вам не связать событие click с изменением цвета?

$('.buttons_that_change_color_on_click').bind('click', function(){ 

    this.style.backgroundcolor = the_value_you_want; 

});