單擊兩次后切換

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=""屬性，則應將所有樣式重置為原來的樣式。