自动化 function jquery 的问题

Question

Hello guys Here i have a function that reacts two time by a same button. One time when it's clicked it fades out other time it fades in, but the problem is one that after 2 clicks it stops responding. I am trying to make it loop but. I don't have any clue. I tried with the clickCounts ++ and if statements but it didn't give me any fruit. so if you guys have any idea I'm quite opened to any suggestions.

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

    
    });        
});

Answer 1

You'll probably have a better time setting a class on the element and using it to see which one of the two behaviors to trigger.

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