檢查按鈕是否被多次點擊

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); }; })