检查按钮是否被多次点击

Question

I have a set of 3 tabs and everytime i click on the same tab it replays the fade-in animation and blinks and i need it to only show the animation when i click on a new tab and not display the fade-in animation when i click on the same tab.

Its because it removes and re-adds the same class everytime i click at it.

what i currently have is:

(function ($) {
    var tabs = $(".tabs li a");
    
    tabs.on("click", function () {
      var content = this.hash.replace("/", "");
      tabs.removeClass("active");
      $(this).addClass("active");
      $("#content").find("section").hide();
      $(content).fadeIn(200);
    });
  })

<ul class="tabs">
          <li><a class="active" href="#/one">Tab 1</a></li>
          <li><a href="#/two">Tab 2</a></li>
          <li><a href="#/three">Tab 3</a></li>
        </ul>

What i have tried:

// if tab is clicked/selected then remove animation
if(!$(tabs).data("clicked")) {
        $(content).fadeIn(200);
      } else {
          $(content).fadeIn(0);
      }
      $(".active").data('clicked', true);

// if click count is higher than 1 then remove animation
var trigger = $(this),
        clickCount = trigger.data('clickCount');

        clickCount++;

        trigger.data('clickCount', clickCount);

        if(clickCount > 1) {
            $(content).fadeIn(0);
        }

Answer 1

Have you tried like that :

var tabs = $(".tabs li a");

tabs.on("click", function () {

  if( !$(this).hasClass("active") ){
    var content = this.hash.replace("/", "");
    $("#content").find("section").hide();
    $(content).fadeIn(200);
    $(".tabs li").find(".active").removeClass("active");
    $(this).addClass("active");
  }


});

Answer 2

I'd suggest always check if active class exists before adding it. And only if it doesn't exist add this class and animation. In this case if active class exists you will not be able to add this class again and the animation not be triggered again.

Answer 3

in JavaScript

element is the button you need specifically. you can get the button id using a simple Js query

 var element = document.getElementById('buttonID');

 element.on('click', (){ let counter = 0; return function inner() { counter++; console.log('Number of clicks: ' + counter); }; })