时间戳

首页 > 解决方案 > 自动化函数 jquery 的问题

javascript - 自动化函数 jquery 的问题

问题描述

大家好，这里我有一个功能，可以通过同一个按钮进行两次反应。一次单击它会淡出，另一次会淡入，但问题是单击 2 次后它停止响应。我试图让它循环但是。我没有任何线索。我尝试使用 clickCounts ++ 和 if 语句，但它没有给我任何成果。所以如果你们有任何想法，我很乐意接受任何建议。

  $(function() {
    $('#two').one("click", function() {
        $("this").css({color:"#f790e8"})        
        $(".others:nth-child(1)").fadeOut("300")
        $(".others:nth-child(2)").delay("150").fadeOut("300")
        $(".others:nth-child(3)").delay("300").fadeOut("300")
        $(".others:nth-child(4)").delay("450").fadeOut("300")
        $(".tube1").delay("300").fadeIn("300")
        $(".tube2").delay("450").fadeIn("300")
        $(".tube3").delay("600").fadeIn("300")

         $('#two').on("click", function() {
             //this code will execute on second click and further clicks 
             $("this").css({color:"black"})        
             $(".others:nth-child(1)").delay("300").fadeIn("300")
             $(".others:nth-child(2)").delay("450").fadeIn("300")
             $(".others:nth-child(3)").delay("600").fadeIn("300")
             $(".others:nth-child(4)").delay("750").fadeIn("300")
             $(".tube1").fadeOut("300")
             $(".tube2").delay("150").fadeOut("300")
             $(".tube3").delay("300").fadeOut("300")
         });

    
    });        
});

标签： javascriptjqueryfunction

解决方案

您可能会有更好的时间在元素上设置一个类并使用它来查看要触发两种行为中的哪一种。

$(function () {
  $("#two").on("click", function () {
    const $this = $(this);
    if ($this.hasClass("on")) {
      //this code will execute on second click and further clicks
      $this.css({ color: "black" });
      $(".others:nth-child(1)").delay("300").fadeIn("300");
      $(".others:nth-child(2)").delay("450").fadeIn("300");
      $(".others:nth-child(3)").delay("600").fadeIn("300");
      $(".others:nth-child(4)").delay("750").fadeIn("300");
      $(".tube1").fadeOut("300");
      $(".tube2").delay("150").fadeOut("300");
      $(".tube3").delay("300").fadeOut("300");
    } else {
      $this.css({ color: "#f790e8" });
      $(".others:nth-child(1)").fadeOut("300");
      $(".others:nth-child(2)").delay("150").fadeOut("300");
      $(".others:nth-child(3)").delay("300").fadeOut("300");
      $(".others:nth-child(4)").delay("450").fadeOut("300");
      $(".tube1").delay("300").fadeIn("300");
      $(".tube2").delay("450").fadeIn("300");
      $(".tube3").delay("600").fadeIn("300");
    }
    $this.toggleClass("on");
  });
});

推荐阅读