单击两次后切换

Question

我有一个JAVASCRIPT函数，可以在单击名为Hexagon的形状后更改几处内容，如您在此处看到的：

JAVASCRIPT

$( ".hexagon1").on("click", function() {
  $( "#hex-area-2" ).css('display','block');
  $( "#hex-area-2" ).css('transition','display 1s ease-in');
  $( "#left-line-animated-container-left").css('display','block');
  $( "#left-line-animated-container-right").css('display','block');
  $( "#left-line-animated-container-center").css('display','block');
  $( "#hex-area-1").css('height','300px');
  $( "#hex-area-centralizer").css('height','300px');
});

单击时，所有这些东西都会改变，但是如果我再次单击此Hexagon，要恢复原始值怎么办？ 有办法用javascript吗？

Answer 1

我会为此使用CSS类。 将默认CSS分配给特定的id ，然后在主体上切换一个类，并让修改后的CSS属性向下层叠到其适当的元素：

/* Default CSS */
#hex-area-2 {
    ...
}
#left-line-animated-container-left {
    ...
}
#left-line-animated-container-right {
    ...
}
#left-line-animated-container-center {
    ...
}
#hex-area-1 {
    ...
}
#hex-area-centralizer {
    ...
}

/* CSS applied on click */
.hex1-toggle #hex-area-2 {
    display: block;
    transition: display 1s ease-in;
}
.hex1-toggle #left-line-animated-container-left,
.hex1-toggle #left-line-animated-container-right,
.hex1-toggle #left-line-animated-container-center {
    display: block;
}
.hex1-toggle #hex-area-1,
.hex1-toggle #hex-area-centralizer {
    height: 300px;
}

$( ".hexagon1").on("click", function() {
    $('body').toggleClass('hex1-toggle');
});

这种“级联”效果就是CSS中的“ C” 。 通过切换主体上的一个类，样式表将在触发DOM重绘时有效地级联结果更改。 请注意，在这种情况下， hex1-toggle类不必处于body级别。 它可能并且可能应该在要修改的所有元素的最接近的父元素，祖父母元素等处。 在此演示中，仅将其放在body级别是因为问题中没有提供HTML结构，而我选择不进行推断。

Answer 2

为所有CSS创建类，然后onclick只需切换这些类。

例如：

.hex-area-2{
  display:block;
}

$( ".hexagon1").on("click", function() {
    $( "#hex-area-2" ).toggleClass("hex-area-2");
});

Answer 3

我相信您可以设置类似于以下功能：

<script type='text/javascript'>
  $(function() {
    $('.hexagon1').toggle(function() {
      $( "#hex-area-2" ).css('display','block');
      $( "#hex-area-2" ).css('transition','display 1s ease-in');
      $( "#left-line-animated-container-left").css('display','block');
      $( "#left-line-animated-container-right").css('display','block');
      $( "#left-line-animated-container-center").css('display','block');
      $( "#hex-area-1").css('height','300px');
      $( "#hex-area-centralizer").css('height','300px');
    }, function() {
      // second click stuff here
    });
  });
</script>

除了在函数中包含所有动作之外，您还可以为每种切换状态创建样式，然后根据需要添加/删除它们。

<script type='text/javascript'>
  $(function() {
    $('.hexagon1').toggle(function() {
      $('hexagon1').addClass('className');
    }, function() {
      $('hexagon1').removeClass('className');
    });
  });
</script>

Answer 4

var i = 1;
$( ".hexagon1").on("click", function() {
  if(i === 1) {
    $( "#hex-area-2" ).css('display','block');
    $( "#hex-area-2" ).css('transition','display 1s ease-in');
    $( "#left-line-animated-container-left").css('display','block');
    $( "#left-line-animated-container-right").css('display','block');
    $( "#left-line-animated-container-center").css('display','block');
    $( "#hex-area-1").css('height','300px');
    $( "#hex-area-centralizer").css('height','300px');
  } else {
    $( "#hex-area-2" ).removeAttr('style');
    $( "#left-line-animated-container-left").removeAttr('style');
    $( "#left-line-animated-container-right").removeAttr('style');
    $( "#left-line-animated-container-center").removeAttr('style');
    $( "#hex-area-1").removeAttr('style');
    $( "#hex-area-centralizer").removeAttr('style');
  }
  $i++; // add 1 to i
  $i = ($i === 3) ? 1 : $i; // if i is now 3 reset to 1
});

.removeAttr('style'); 将删除元素上的内联样式。 如果您已经在CSS样式表中设置了样式，然后上面的jQuery添加了内联样式，因为这会删除整个style=""属性，则应将所有样式重置为原来的样式。