Javascript-超級簡單-如何為第二次點擊操作編碼

Question

對於大多數人來說，這可能是一個簡單的問題，但我只是在學習，因此您將不得不原諒我...

我正在編寫代碼，以按菊花鏈式事件順序在屏幕上顯示幾個不同的元素。 本質上，我在下一個提出了一個要點。 在初始頁面加載時，用戶將僅看到element_0_5。 單擊此元素將顯示下一個，依此類推。

卡住的地方是我無法弄清楚如何使代碼回到僅顯示element_0_5並重新隱藏其他所有內容。 基本上是這樣，當我再次單擊element_0_0時，所有元素都會撤消之前的所有操作，並返回到顯示element_0_5的初始狀態

請幫忙謝謝！！

 $('#element_0_3').on('click', function(event) { $('#element_0_4').removeClass('animated fadeInDown infinite'); setTimeout(function() { $('#element_0_4').addClass('animated fadeInDown'); }, 10); }); $('#element_0_3').on('click', function(event) { $('#element_0_6').removeClass('animated rotateIn infinite'); setTimeout(function() { $('#element_0_6').addClass('animated rotateIn'); }, 10); }); $('#element_0_3').on('click', function(event) { $('#element_0_7').removeClass('animated fadeInDown infinite'); setTimeout(function() { $('#element_0_7').addClass('animated fadeInDown'); }, 10); }); $('#element_0_5').on('click', function(event) { $('#element_0_0').removeClass('animated slideInUp infinite'); setTimeout(function() { $('#element_0_0').addClass('animated slideInUp'); }, 10); }); $('#element_0_0').on('click', function(event) { $('#element_0_1').removeClass('animated fadeInDown infinite'); setTimeout(function() { $('#element_0_1').addClass('animated fadeInDown'); }, 10); }); $('#element_0_0').on('click', function(event) { $('#element_0_2').removeClass('animated rotateIn infinite'); setTimeout(function() { $('#element_0_2').addClass('animated rotateIn'); }, 10); }); $('#element_0_0').on('click', function(event) { $('#element_0_3').removeClass('animated fadeInDown infinite'); setTimeout(function() { $('#element_0_3').addClass('animated fadeInDown'); }, 10); }); $('#element_0_5').on('click', function(event) { $('#element_0_0').toggle(); }); $('#element_0_0').on('click', function(event) { $('#element_0_1').toggle(); }); $('#element_0_0').on('click', function(event) { $('#element_0_2').toggle(); }); $('#element_0_0').on('click', function(event) { $('#element_0_3').toggle(); }); $('#element_0_3').on('click', function(event) { $('#element_0_4').toggle(); }); $('#element_0_3').on('click', function(event) { $('#element_0_6').toggle(); }); $('#element_0_3').on('click', function(event) { $('#element_0_7').toggle(); }); 

Answer 1

您可以添加一個控制變量，像這樣

var click = 0;
$('#element_0_0').on('click', function(event) {
  if(click == 0){
    $('#element_0_1').removeClass('animated fadeInDown infinite');
    setTimeout(function() {
      $('#element_0_1').addClass('animated fadeInDown');
    }, 10);
     click = 1;
  }else{
    $('#element_0_1').addClass('animated fadeInDown');
    setTimeout(function() {
      $('#element_0_1').removeClass('animated fadeInDown infinite')
    }, 10);
     click = 0;
  }

});