Question

我有这段代码：

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

此例程创建一系列div，其中包含＆＃34; swatch＆＃34; 课程＆＃39; swatch＆＃39;只包含宽度：40px;身高：20px;

为每个div指定背景颜色颜色通过变量＆＃39;

传递到脚本中

我希望能够使每个div可点击＆＃39;。即......这样的事情

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

我真正想要的是用户能够点击div 没有任何div将包含任何锚文本
所以整个'空'＆＃39;是可点击的

当他们点击div时，jquery调用将改变另一个名为＆＃39; targetDiv＆＃39;的div的颜色。与调用div相同的颜色背景颜色。

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

Answer 1

使用jQuery的on函数，如：

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

  //code to change color of div

 });

Answer 2

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

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

See a working example.

由于没有任何div包含任何文本，因此重要的是给它们高度和宽度以使它们可见。否则，您将无法看到颜色更新。请参阅链接的JSFiddle上的CSS以获取想法。

jquery使整个空div可点击

2 个答案: