Question

我创建了一个包含4种颜色的自定义矩形，如下所示，

 <div style=" width:400; height:400; float:left">
 <div style="background-color:red; width:50%; height:50%; float:left">
 </div>
 <div style="background-color:blue; width:50%; height:50%; float:right">
 </div>
 <div style="background-color:green; width:50%; height:50%; float:left">
 </div>
 <div style="background-color:orange; width:50%; height:50%; float:right">
 </div>
 </div>

我需要更改以下类的背景颜色属性，与上面的div相同，点击上面的div

<div class="eventBox eventBox__colorBar"></div>

Answer 1

这是使用jquery执行所需操作的示例。 HTML：

<div style=" width:400; height:400; float:left">
  <div class="div-class" style="background-color:red; width:50%; height:50%; float:left">
    test1
  </div>
  <div class="div-class" style="background-color:blue; width:50%; height:50%; float:right">
    test 2
  </div>
  <div class="div-class" style="background-color:green; width:50%; height:50%; float:left">
    test3
  </div>
  <div class="div-class" style="background-color:orange; width:50%; height:50%; float:right">
    test4
  </div>
</div>
<div class="eventBox eventBox__colorBar">
  test5
</div>

jQuery的：

$(".div-class").click(function() {
  $(".eventBox").css('color', this.style.backgroundColor);
});

我为每个div分配了一个类名，并使用该类名挂钩了一个click事件。

使用angular2单击div时更改类background-color属性

1 个答案: