Javascript 单击两次后切换

我有一个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');
});

---

单击后，所有这些内容都会发生变化，但如果我再次单击此六边形，希望恢复原始值，该怎么办？有一种方法可以使用javascript实现这一点？

为所有CSS创建类，然后单击“只切换这些类”

例如：

---

为所有CSS创建类，然后单击“仅切换这些类”

例如：

---

我相信您可以设置与此类似的功能：

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

$（函数（）{
$（'.hexagon1'）.toggle（函数（）{
$（“#hex-area-2”）.css（'display'，'block'）；
$（“#hex-area-2”）.css（'transition'，'display 1s ease in'）；
$（“#左行动画容器左”）.css（'display'，'block'）；
$（“#左行动画容器右”）.css（'display'，'block'）；
$（“#左行动画容器中心”）.css（'display'，'block'）；
$（“#hex-area-1”）.css（'height'，'300px'）；
$（“#六角区域扶正器”）.css（'height'，'300px'）；
}，函数（）{
//第二次点击这里
});
});

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

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

$（函数（）{
$（'.hexagon1'）.toggle（函数（）{
$（'hexagon1'）.addClass（'className'）；
}，函数（）{
$（'hexagon1'）.removeClass（'className'）；
});
});

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

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

$（函数（）{
$（'.hexagon1'）.toggle（函数（）{
$（“#hex-area-2”）.css（'display'，'block'）；
$（“#hex-area-2”）.css（'transition'，'display 1s ease in'）；
$（“#左行动画容器左”）.css（'display'，'block'）；
$（“#左行动画容器右”）.css（'display'，'block'）；
$（“#左行动画容器中心”）.css（'display'，'block'）；
$（“#hex-area-1”）.css（'height'，'300px'）；
$（“#六角区域扶正器”）.css（'height'，'300px'）；
}，函数（）{
//第二次点击这里
});
});

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

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

$（函数（）{
$（'.hexagon1'）.toggle（函数（）{
$（'hexagon1'）.addClass（'className'）；
}，函数（）{
$（'hexagon1'）.removeClass（'className'）；
});
});

我会为此使用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

级别。它可以而且可能应该位于与要修改的所有元素最近的父元素、祖父母元素等。在本演示中，它被放置在

主体

级别，原因很简单，因为问题中没有提供HTML结构，因此我选择不进行推断。

我将使用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');
});

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
});

这种“级联”效果就是CSS中的“C”。通过切换主体上的一个类，当触发DOM重画时，样式表将有效地级联产生的更改。请注意，在这种情况下，

hex1 toggle

类不必位于

body

级别。它可以而且可能应该位于与要修改的所有元素最近的父元素、祖父母元素等。在本演示中，它被放置在

主体

级别，原因很简单，因为问题中没有提供HTML结构，我选择不进行推断

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=“”
属性，它应该将所有样式重置为原来的样式

.removeAttr（'style'）将删除元素上的内联样式。如果您在CSS样式表中设置了样式，然后上面的jQuery添加了内联样式，因为这会删除整个
style=”“
属性，它应该将所有样式重置为原来的样式。
请注意，作为事件处理套件一部分的方法在jq 1.8中被弃用，在jq 1.9中被删除…@War10ck太棒了！注意，作为事件处理套件一部分的方法在JQ1.8中被弃用，在JQ1.9中被删除…@War10ck太棒了！这是假设OP没有应用默认的内联样式，或者页面上以前的事件和交互也没有改变这些特定元素的内联样式。不一定要相信这是真的，但一定要注意一些假设……是的，这就是为什么我说CSS样式表。这是假设OP没有应用默认的内联样式，或者页面上以前的事件和交互也没有改变这些特定元素的内联样式。不一定要相信这是真的，但一定要注意一些假设……是的，这就是为什么我说CSS样式表。将工作，可以做重构毫无疑问。这真的工作！现在我要学习你所做的，谢谢@War10ck@Eugenio没问题。很乐意帮忙。让我知道，如果有任何部分是没有意义的，我会很高兴地详细阐述它。这真的工作！现在我必须学习