Question

我这个项目，当我点击工厂时，比例变化并显示一些文本。

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

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

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

如果我点击第一个星球它就可以正常工作，但是当这个星球被选中时，我点击另一个星球，所有的课程都开始toogle，而且规模和不透明度变得疯狂。我不会这样做。知道如何重置＆＃39;如果我在一个人已经改变了课程的时候点击另一个星球，那就到原来的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。

JS toggleClass正确的方式

2 个答案: