運行特定事件序列的按鈕（我不知道如何簡化的冗長代碼）

Question

我的代碼正在運行，但它非常冗長，而且我知道它可以變得更緊湊。 我只是不知道如何:-)

我正在建立一個音頻組合。 單擊按鈕時，會發生一系列事件。 單擊另一個按鈕時，所有其他活動按鈕都將被終止，並且該特定按鈕的序列將運行。

這些按鈕是不可見的，並且放置在開關的可視化上。 單擊時，開關的圖像輕彈到其“已激活”state 中，其“顯示：無”的 class 被刪除。 這應該給用戶一種實際輕彈開關開始播放音頻的印象。

像這樣：

$(function(){

  // FIRST BUTTON
  $('.button01').click(function() {
    if ($('.switch01').hasClass('activated')){

    // So if button.button01 is clicked and img.switch01 has class "activated"

      // Kill all audio
      $('audio').each(function(){ this.pause(); this.currentTime = 0; });

      // Turn this switch off
      $('.switch01').removeClass('activated');

      // Kill all info cards showing the playback controls
      $('.audio-info-card').addClass('d-none');
    } else { 


    // If button.button01 is clicked and img.switch01 DOESN'T have class "activated"

      // Turn all other switches off
      $('.switch02, .switch03').removeClass('activated');

      // Kill all info cards
      $('.audio-info-card').addClass('d-none');

      // Activate this switch and info card
      $('.switch01').addClass('activated');
      $('.audio-info-card#card01').removeClass('d-none');

      // Kill all audio
      $('audio').each(function(){ this.pause(); this.currentTime = 0; });

      // Start this audio
      $('#audio01-player')[0].play();
    }
  });

  // SECOND BUTTON
  $('.button02').click(function() {
    if ($('.switch02').hasClass('activated')){ 

    // So if button.button02 is clicked and img.switch02 has class "activated"

      // Kill all audio
      $('audio').each(function(){ this.pause(); this.currentTime = 0; });

      // Turn this switch off
      $('.switch02').removeClass('activated');

      // Kill all info card showing the playback controls
      $('.audio-info-card').addClass('d-none');
    } else { 


    // If button.button02 is clicked and img.switch02 DOESN'T have class "activated"

      // Turn all other switches off
      $('.switch01, .switch03').removeClass('activated');

      // Kill all info cards
      $('.audio-info-card').addClass('d-none');

      // Activate this switch and info card
      $('.switch02').addClass('activated');
      $('.audio-info-card#card02').removeClass('d-none');

      // Kill all audio
      $('audio').each(function(){ this.pause(); this.currentTime = 0; });

      // Start this audio
      $('#audio02-player')[0].play();
    }
  });

有 16 個按鈕。 我意識到這段代碼很愚蠢，但 JS / jQuery 不是我的強項：-D

幸運的是，代碼可以工作，但任何有助於簡化此過程的幫助將不勝感激！

Answer 1

您可以為所有具有 class 名稱的按鈕分配click()事件，以button開頭，如下所示：

  $('button[class^="button"]').click(function() {
     let buttonNr = $(this).attr("class").substr(6);
     if ($('.switch' + buttonNr).hasClass('activated')) {
        $('audio').each(function() {
           this.pause();
           this.currentTime = 0;
        });

        $('.switch' + buttonNr).removeClass('activated');
        $('.audio-info-card').addClass('d-none');
     } else {

        $('[class^="switch"]').removeClass('activated');
        $('.audio-info-card').addClass('d-none');
        $('.switch' + buttonNr).addClass('activated');
        $('.audio-info-card#card' + buttonNr).removeClass('d-none');

        $('audio').each(function() {
           this.pause();
           this.currentTime = 0;
        });

        $('#audio' + buttonNr + '-player')[0].play();
     }
 });