Javascript 如何使用jQuery实现汽车转向灯（闪光灯）？

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

$("#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
    }
}

---

我将创建一个css类来处理css动画中的淡入淡出和闪烁，并在Jquery中单击时切换类。

您应该创建一个闭包来保存不同单击的状态。简单地创建一个闭包，方法是将click处理程序放在一个自调用函数中，并在其中声明并初始化共享变量。增加单击处理程序末尾的计数。可以使用模数运算符“%”在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++;
   });
})();

---

您可以定义外部变量计数器。 例如：

$(document).ready(function() {


  var counter = 0;
  var blinking;

  function blinker() {
    $('#arrow-left-blink').fadeOut(500);
    $('#arrow-left-blink').fadeIn(500);
    blinker();
  }

  $("#arrow-left").click(function() {
    counter++;
    if (counter % 2 == 1) {
      $('#arrow-left-blink').css("visibility", "visible");
      blinking = setTimeout(function() {
        blinker();
      }, 1000);
    } else {
      clearInterval(blinking);
      $('#arrow-left-blink').css("visibility", "hidden");
    }
  });
});

---

这里有一个JSFIDLE链接：。

您可以使用awesome

标记来实现这一点！只需将您的

某个
变量切换为true/false即可。这太可惜了，太棒了！这似乎很容易做到->@adeneo也很有帮助，thxOP需要状态方面的帮助，而不是切换类。您的评论可以通过示例代码和一些细节改进为真实的答案。对于混乱的原始答案，很抱歉，我按tab+space试图格式化答案，但无意中提交了。你也应该查看adeneo评论。