JS toggleClass 正确的方式

Question

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

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

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

现在我一直在尝试通过 js 使用切换 class 但我需要一些帮助才能使其正常工作。

如果我点击第一个星球它工作正常，但是当这个星球被“选中”并且我点击另一个星球时所有 classes 开始切换并且比例和不透明度变为 crazy.I不知道如何将 'reset' 变成原来的 css 如果我点击另一个星球，而另一个星球已经改变了 class。

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

如果使用起来很麻烦，那么我会使用 jQuery addClass 和 removeClass 而不是 toggleClass。

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

Answer 2

我想我很清楚验收标准，但为了确定，这就是我要做的：

当我点击一个行星时，我想让它缩放。
如果我点击一个已经按比例缩放的行星，我希望它重置为原始比例。
当我点击一个行星时，我想 'reset' 任何其他行星到它们的原始比例，如果我点击的行星还没有缩放，我想缩放它。

鉴于此，您可以尝试更明确地说明单击 'planet' 时需要发生的情况：

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

JS toggleClass 正确的方式

JS toggleClass right way

html

javascript

css

jquery

toggleclass