0

我设置为数组的页面上有三个按钮。我正在使用 $.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)

 });
4

2 回答 2

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/

于 2013-08-12T20:12:47.740 回答
0

为什么不将点击事件与颜色变化绑定？

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

    this.style.backgroundcolor = the_value_you_want;

});
于 2013-08-12T20:12:45.183 回答