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创建类，然后单击以切换这些类。

例如：

.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=""属性，它应该将所有样式重置为它们的样式。

单击两次后切换

4 个答案: