Question

我对javascript和jquery很新。我正在尝试创建一个用户选择一个单元格（添加一个活动类）的板，然后单击一个填充了某种颜色的不同单元格。然后原始单元格填充相同的颜色。这是我的jsfiddle：

var fillIn = $('.active_color_select')
$(red).click(function(){
 $(fillIn).css('background-color', 'red');
 });

**我认为问题出在这里

正如您将看到的，当您单击一个空单元格然后单击颜色时，单元格将填充，但随后选择的下一个颜色会将所有单元格更改为相同的颜色。在选择下一个单元格时，我不确定如何让所选单元格具有所需的颜色而不切换。

任何输入都将非常感谢！

由于

Answer 1

这是我怎么写的：

$('.color').click(function(){
    var bgColor = $(this).attr('id');
    $('.active_color_select').css('background-color',bgColor);
});

编辑：实际上，Rick提出了一个很好的观点。也许最好从当前的点击目标中获取bg-color属性，如下所示：

$('.color').click(function(){
    var bgColor = $(this).css('background-color');
    $('.active_color_select').css('background-color',bgColor);
});

Answer 2

您需要使用$('.active_color_select')代替$(fillIn)来更改td类active_color_select的颜色：

$(red).click(function () {
    $('.active_color_select').css('background-color', 'red');
});

$(blue).click(function () {
    $('.active_color_select').css('background-color', 'blue');
});

$(green).click(function () {
    $('.active_color_select').css('background-color', 'green');
});

$(mint).click(function () {
    $('.active_color_select').css('background-color', '#9CBA7F');
});

$(white).click(function () {
    $('.active_color_select').css('background-color', 'white');
});

$(lightPurple).click(function () {
    $('.active_color_select').css('background-color', '#BF5FFF');
});

另请注意，您的所有变量都已经是jQuery对象。您无需再次将其包含在$()内。

例如，您可以使用：

inactive.removeClass('active_color_select');

而不是：

$(inactive).removeClass('active_color_select');

应该对其他变量应用相同的方法。

<强> Updated Fiddle

Answer 3

在所有点击处理程序上，您需要删除所有活动类并使其再次处于非活动状态：

 $(red).click(function(){
    $(fillIn).css('background-color', 'red');
    $('.active_color_select').removeClass('active_color_select');
  });

你也不需要所有这些变量：

 $('#red').click(function(){
    $('.active_color_select').css('background-color', 'red');
    $('.active_color_select').removeClass('active_color_select');
  });

你也可以链接电话：

 $('#red').click(function(){
    $('.active_color_select').css('background-color', 'red')
                             .removeClass('active_color_select');
  });

编辑，您的初始点击操作也有太大的影响：

$('.inactive').click(function(){
      $('.active_color_select').removeClass('active_color_select');
      //optionally you could add inactive back to the above
      $(this).addClass('active_color_select');
      //optionally you can remove inactive from this
}) //close click handler here

Answer 4

您已使用选择器查询该元素。

fillIn.css('background-color', 'red');

fillIn是一个变量，表示从选择器查询返回的jQuery对象（$('.active_color_select')）

所以整个事情看起来像：

var fillIn = $('.active_color_select')
$(red).click(function() {
    fillIn.css('background-color', 'red');
});

如果你想将它应用于元素集，可能更容易做到这样的事情：

<div class="fill-me-in" data-color="red"></div>
<div class="fill-me-in" data-color="green"></div>

然后你可以使它更通用，如：

$('.fill-me-in').click(function(e) {
    var me    = $(this),
        color = me.data('color');
    me.css('background-color', color);
});

Answer 5

这里有一些工作代码，可以做你想要的，但更有效率:) 的 http://jsfiddle.net/2J8yq/9/

// Get the fillable elements. $(selector).find() is faster than $(selector > selector) // http://stackoverflow.com/questions/8929951/jquery-selector-why-is-id-findp-faster-than-id-p var fillableElements = $('#master').find('td'); var colorElements = $('#selection').find('.color'); // A var for storing the currently selected elements var selected = null; // We use .on() if you are adding dynamic elements in the future, else click events won't fire. // https://api.jquery.com/on/ fillableElements.on('click', function() { var el = $(this); // Remove from all other elements the selected class fillableElements.removeClass('active_color_select'); // Add the selected class to the element el.addClass('active_color_select'); // Assign the selected value selected = el; }); colorElements.on('click', function() { var el = $(this); // Get the bg color from the chosen color var color = el.css('background-color'); // Add the color selected.css('background-color', color); });

选定/活动元素的CSS

5 个答案: