jQuery选择一个块并使用列表中某个块的bg颜色更改它的bg颜色

Question

例如，在一列中，我有3个块（div），在第二列中，我有一个其他块（div）的列表。

第一列块表示蛋糕地板，第二列块表示可应用于任何蛋糕地板的味道。

所以通过选择一个楼层，我想要选择这个特定楼层的味道，然后，通过选择另一个楼层，我想申请其他一种口味......

类似的东西：

每个品味标题的示例，但实际上没有正常工作，因为这样的味道适用于之前选择的楼层。

$(".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时，会添加新事件。现在有两种方法可以监听事件，因此会有多个div更新。

可以使用off jQuery事件解决此问题。

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

参考jsFiddle here

Answer 2

只需将代码更改为：

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