JS toggleClass正确的方法

Question

我有这个项目，当我单击植物时，比例会发生变化并显示一些文本。

http://www.gaianet.com.br/Nissin-teste/

我有这个项目，我应该点击一个行星并缩放它，并通过不透明度显示另一个div。

现在，我一直在尝试使用切换类通过js进行操作，但是我需要一些帮助以使其正常工作。

如果我单击第一个行星，它会很好，但是当“选择”这个行星，然后单击另一个行星时，所有类开始混乱，缩放和不透明度变得疯狂。我不知道如何进行“重置”如果我已经更改了类别，则单击另一颗行星，则为原始CSS。

$(".layer.planeta1").click(function(){
  $(".institucional").toggleClass("escala-planeta repo1-1");
   $(".planet-info1").toggleClass("opacidade-planeta ");
    $(".educacao").toggleClass("escala-menor-planeta repo1-2");
     $(".pdv").toggleClass("escala-menor-planeta repo1-3");     
}); 



$(".layer.planeta2").click(function(){
  $(".educacao").toggleClass("escala-planeta repo-2-1");
   $(".planet-info2").toggleClass("opacidade-planeta ");
    $(".institucional").toggleClass("escala-menor-planeta repo-2-2");
     $(".pdv").toggleClass("escala-menor-planeta repo-2-3");       

}); 



$(".layer.planeta3").click(function(){
  $(".pdv").toggleClass("escala-planeta");
   $(".planet-info3").toggleClass("opacidade-planeta ");
     $(".educacao").toggleClass("escala-menor-planeta");
     $(".institucional").toggleClass("escala-menor-planeta");         
}); 

我确定应该有更好的方法来做到这一点，但我不知道如何做。 非常感谢

Answer 1

我认为我对接受标准很清楚，但可以肯定的是，我要处理的是：

• 当我单击一个行星时，我希望它缩放。
• 如果我单击已经缩放的行星，则希望将其重置为原始缩放。
• 当我单击一个行星时，我想将其他所有行星“重置”为其原始比例，如果尚未缩放，请对我单击的行星进行缩放。

鉴于此，您可以尝试更明确地了解单击“行星”时需要发生的情况：

$('.planet').on('click', function(event){
  $('.planet').removeClass('scale');  // Explicitly remove the scale class from other planets
  $(this).toggleClass('scale'); // Scale the one I am clicking on, or if it's already scaled, revert it
});

一个简化的示例演示： http : //codepen.io/anon/pen/xbMJRd

Answer 2

如果使用它会造成很多麻烦，那么我将使用jQuery addClass和removeClass而不是toggleClass。

另一个建议是，我将jQuery dom元素保存在变量中，这样我就不会一次又一次地搜索整个dom。