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

Question

例如，在一列中我有 3 个 block (div)，在第二列中我有其他 block 的列表 (div)。

第一列 block 代表蛋糕层，第二列 block 代表可以应用于任何蛋糕层的口味。

因此，通过选择一个楼层，我想为这个特定楼层选择一种口味，然后，通过选择另一层，我想应用其他口味中的一种......

类似的东西:

带有每种口味标题的示例，但实际上并不能正常工作，因为口味适用于之前选择的楼层。

$(".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