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

您的解决方案似乎过于复杂。一个更简单的解决方案可能是：

在按钮上添加点击处理程序。单击按钮时，将“活动”类添加到该按钮并从其他按钮中删除。
将更改处理程序绑定到颜色选择器。发生这种情况时，请更改活动按钮的背景颜色：

我还假设您可以为按钮提供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;

});

颜色选择器在JQuery中设置各自的属性

2 个答案: