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

});