jquery使整个空div可单击

我有以下代码：

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

此例程使用一类样例创建一系列div。 类“swatch”只包含宽度：40px；高度：20px

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

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

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

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

如果这不合理，很抱歉。 Michael使用jQuery的on函数，如：

$.(".swatch").on('click',function(){

  //code to change color of div

 });

---

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

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

---

由于所有div都不包含任何文本，因此为其指定高度和宽度以使其可见非常重要。否则，您将看不到颜色更新。查看链接的JSFIDLE上的CSS以获取想法。

使用起始脚本，您能告诉我当光标悬停在'swatch'divs$，{'class'：'swatch'}上时，如何将光标更改为指针吗；。。。。。。。。。。。。这对我不起作用最简单的方法是在CSS:swatchContainer div{cursor:pointer}中完成。如果您必须使用JavaScript，只需调整选择器：$'swatchContainer div'.css'cursor'，pointer'，谢谢您的响应。我同意你的建议

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