jquery 使整个空 div 可点击答案

【问题标题】：jquery make entire empty div clickablejquery 使整个空 div 可点击
【发布时间】：2014-12-08 22:27:39
【问题描述】：

我有这个代码：

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' 类只包含 width: 40px;高度：20px；

每个 div 都分配有背景颜色。
颜色通过变量“colors”传递到脚本中

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

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

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

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

对不起，如果这没有意义。迈克尔

【问题讨论】：

标签： jquery css

【解决方案1】：

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

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

See a working example.

由于没有一个 div 将包含任何文本，因此为它们提供高度和宽度以使其可见是很重要的。否则，您将看不到颜色更新。有关想法，请参阅链接的 JSFiddle 上的 CSS。

【讨论】：

使用启动脚本，你能告诉我如何让光标在'swatch' div上悬停时变为指针
$('
', {'class': 'swatch'}).css('cursor', 'pointer');............这对我不起作用
最简单的方法是在您的 CSS 中执行此操作：#swatchContainer div {cursor: pointer}。如果您必须在 JavaScript 中执行此操作，只需调整您的选择器：$('#swatchContainer div').css('cursor', 'pointer')

【解决方案2】：

使用 jQuery 的on 函数如：

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

  //code to change color of div

 });

【讨论】：

感谢您的回复。我同意你的建议