使用Angular2单击DIV时更改类背景色属性

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);
});

我已经为每个divs分配了一个类名称，并使用该类名称挂上了一个点击事件。