angular2

Question

とdiv要素のクリックで変更するクラスのbackground-colorプロパティに次のように私は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要素のそれぞれのクラス名を割り当て、そのクラス名を使用してクリックイベントを夢中にしました。