jquery 使整个空 div 可点击

Question

我有这个代码:

var appendColors = function(colors, root) {
    $.each(colors, function(index, value) {
      var swatchEl = $('', {
          'class': 'swatch'
        })
        .css('background-color', 'rgba(' + value + ', 1)');
      root.append(swatchEl);
    });

此例程创建了一系列具有“swatch”类的 div。
“样本”类仅包含宽度:40px；高度:20px；

每个 div 都指定了一种背景色。
颜色通过变量“颜色”传递到脚本中

我希望能够使每个 div 都“可点击”。即...像这样

$('.swatch').html('execute jquery script');

我真正想要的是让用户能够点击div
所有 div 都不会包含任何 anchor 文本
所以整个“空”是可点击的

当他们点击 div 时，jquery 调用会将另一个名为“targetDiv”的 div 的颜色更改为调用 div 的相同颜色背景颜色。

抱歉，如果这没有意义。迈克尔

Answer 1

此代码将使用被单击元素的背景颜色更新元素的背景颜色:

$(".swatch").click(function() {
    $("#target").css('background-color', $(this).css('background-color'));
});

See a working example.

由于所有 div 都不会包含任何文本，因此为它们指定高度和宽度以使它们可见非常重要。否则，您将看不到颜色更新。有关想法，请参阅链接的 JSFiddle 上的 CSS。