jQuery选择一个块并将它的bg颜色替换为列表

问题描述：

其中一个块的bg颜色例如，在一列中，我有3个块（div），而在第二列中，我有一个其他块（div）的列表，。jQuery选择一个块并将它的bg颜色替换为列表

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

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

类似的东西：

每个味道的标题的例子，但并没有真正正常工作，自那时以来，味适用于先前选定的楼层。

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

请分享HTML了。另外，为什么你会在'click'里面点击'click'？ –

嘿，添加了HTML。原谅我，我真的是新的JS，Jquery，不知道如何处理它... – fuji

不知道我是否得到了你的问题，但像'$（“。cake-taste”）尝试'off'事件。 off（）。click（function（）'...参见[jsFiddle here]（https://jsfiddle.net/taleebanwar/tpc0er9j/1/） – Taleeb

答

当第一次div.cake-floor选择 - 它增加了一个事件侦听器$(".cake-taste").click事件。

当再次选择任何div.cake-floor时，会添加新事件。现在有两种方法监听事件，因此多个div正在更新。

这可以使用off事件jQuery来解决。

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

参考jsFiddle here

完美！谢谢！ – fuji

答

只要改变你的代码变成：

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

jQuery选择一个块并将它的bg颜色替换为列表

相关推荐