检查按钮是否被多次点击

Question

我有一组 3 个选项卡，每次我单击同一个选项卡时，它都会重播淡入动画并闪烁，我需要它仅在单击新选项卡时显示动画，而在我单击时不显示淡入动画单击同一选项卡。

这是因为每次我点击它时它都会删除并重新添加相同的类。

我目前拥有的是：

(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>

我尝试过的：

// 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

你有没有试过这样：

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

我建议在添加之前始终检查active类是否存在。 并且仅当它不存在时才添加此类和动画。 在这种情况下，如果存在active类，您将无法再次添加此类并且不会再次触发动画。

Answer 3

在 JavaScript 中

element 是您特别需要的按钮。 您可以使用简单的 Js 查询获取按钮 ID

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

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