javascript - 如何用 jQuery 做汽车转向灯(信号灯)？

Question

我有一些奇怪的任务要做。我必须在我的网页中实现汽车转向灯功能。我有两个按钮(左和右)和两个绿色箭头(左和右)。应该是这样的:我单击左键(左箭头现在隐藏)，左箭头应该闪烁。当我再次点击时，它应该停止动画并被隐藏。我只是不知道如何处理按钮状态并正确使用它。谢谢。

$("#arrow-left").click(function blinker() { 
    if(something) {
       $('#arrow-left-blink').css("visibility", "visible");
        $('#arrow-left-blink').fadeOut(500);
        $('#arrow-left-blink').fadeIn(500);
        setInterval(blinker, 1000);
    } else {
     //hide
    }
}

Answer 1

您应该创建一个闭包来保存不同点击的状态。通过将点击处理程序放入自调用函数中并在其中声明+初始化您的共享变量来简单地创建一个闭包。在点击处理程序结束时增加计数。您可以使用模数运算符“%”在 true 和 false 之间切换。 0%2==0, 1%2==1, 2%2==0, 3%2== 1, 4%2==0, ...

(function(){
    var counter = 0;
    $("#arrow-left").click(function blinker() { 
       if(counter%2) {// modulus operator will toggle between 0 and 1 which corresponds to truthy or falsy
         $('#arrow-left-blink').css("visibility", "visible");
         $('#arrow-left-blink').fadeOut(500);
         $('#arrow-left-blink').fadeIn(500);
         setInterval(blinker, 1000);
      } else {
      //hide
      }
      counter++;
   });
})();