javascript - 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