Search code examples
jqueryhtmlcssbackground-color

jQuery pick a block and change it's bg color with the bg color of one of the blocks from list

For example in one column I have 3 blocks (div), and in second column I have a list of other blocks (div).

The first column blocks represent cake floors and the second column blocks represent tastes which can be applied to any of the cake floor's.

So by picking a floor I want to pick a taste for this one certain floor, and then, by picking another floor, I want to apply one of the other tastes...

Something like that:

enter image description here

Example with each taste's title, but doesn't really work properly, since then the taste applies to previously selected floors.

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

  • When the first time div.cake-floor is selected - it adds an event listener to $(".cake-taste").click event.

    When any div.cake-floor is selected again a new event gets added. Now there are two methods listening to the event and so multiple divs are getting updated.

    This can be resolved using off event of jQuery. 

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

    Refer jsFiddle here