jQueryブロックを選んでリストのブロックのbg色でbgの色を変更します

Question

たとえば、1つの列には3つのブロック（div）があり、2番目の列には他のブロック（div）のリストがあります。 。

第1列ブロックはケーキフロアを表し、第2列ブロックはケーキフロアのいずれにも適用可能な味を表す。

ので、床を選ぶことによって、私はこの1つの、特定の床のための味を選ぶにしたいし、その後、別のフロアを選ぶことによって、私は他の味のいずれかを適用したい...そんな

何か：

それぞれ味のタイトルを持つ例が、その後、味は以前に選択された床に適用されますので、実際に、正常に動作しません。

$(".cake-floor").click(function(){ 
    var floor = $(this); 
    $(".cake-taste").click(function(){ 
    var taste = $(this).text(); 
    $(floor).text(taste); 
    }); 
}); 

HTML：

<div class="col-md-6 mb-sm-3"> 
    <div style="background: #dedede; height: 40px; width: 40px; border-radius: 50%; margin-bottom: -10px;"></div> 
    <div class="cake-floor mb-2" data-floor="3"></div> 
    <div class="cake-floor mb-2" data-floor="2"></div> 
    <div class="cake-floor" data-floor="1"></div> 
</div> 

<div class="col-md-6 tastes"> 
    <div class="cake-taste text-center" data-taste="chocolate">chocolate</div> 
    <div class="cake-taste text-center" data-taste="caramel">caramel</div> 
    <div class="cake-taste text-center" data-taste="banana">banana</div> 
    <div class="cake-taste text-center" data-taste="lime">lime</div> 
    <div class="cake-taste text-center" data-taste="blueberry">blueberry</div> 
    <div class="cake-taste text-center" data-taste="rapsberry">rapsberry</div> 
    <div class="cake-taste text-center" data-taste="strawberry">strawberry</div> 
</div> 

Answer 1

を初めてdiv.cake-floorが選択されている場合 - それは$(".cake-taste").clickイベントにイベントリスナーを追加します。

div.cake-floorが再度選択されると、新しいイベントが追加されます。イベントを聞くには2つの方法があり、複数のdivが更新されています。

これは、offイベントのjQueryを使用して解決できます。

$(".cake-taste").off().click(function(){ 
... 
} 

は親切すぎてHTMLを共有jsFiddle here

Answer 2

はちょうどあなたのコードになっ変更：

$(".cake-floor").click(function(){ 
    var floor = $(this); 
    $(".cake-taste").off().click(function(){ 
    var taste = $(this).text(); 
    floor.text(taste); 
    }); 
});