javascript - JavaScriptでid値のみが変更される重複コードを回避するにはどうすればよいですか?

Question

最近、HTML と HTML5 の学習を始めたばかりです。私のサイトには、さまざまな曲や mp3 を再生するさまざまなオーディオ プレーヤーが含まれています。現時点では、オーディオ プレーヤーごと、再生/一時停止および停止ボタンごとに異なる ID 名を作成しました。

これを再生するための私の JavaScript ファイルには、同様のコードが不必要に繰り返されています。コードが異なる ID 名で繰り返されないように、変数を使用してこれを行うより良い方法があると思いますが、私は JavaScript にあまり詳しくありません。

私の JavaScript ファイルのスニペットは次のようになります。

$(document).ready(function() {
  $("#play-bt1").click(function() {
    $("#audio-player1")[0].play();
    $("#message").text("Music started");
  })

  $("#pause-bt1").click(function() {
    $("#audio-player1")[0].pause();
    $("#message").text("Music paused");
  })

  $("#stop-bt1").click(function() {
    $("#audio-player1")[0].pause();
    $("#audio-player1")[0].currentTime = 0;
    $("#message").text("Music Stopped");
  })
})

$(document).ready(function() {
  $("#play-bt2").click(function() {
    $("#audio-player2")[0].play();
    $("#message").text("Music started");
  })

  $("#pause-bt2").click(function() {
    $("#audio-player2")[0].pause();
    $("#message").text("Music paused");
  })

  $("#stop-bt2").click(function() {
    $("#audio-player2")[0].pause();
    $("#audio-player2")[0].currentTime = 0;
    $("#message").text("Music Stopped");
  })
})
$(document).ready(function() {
  $("#play-bt3").click(function() {
    $("#audio-player3")[0].play();
    $("#message").text("Music started");
  })

  $("#pause-bt3").click(function() {
    $("#audio-player3")[0].pause();
    $("#message").text("Music paused");
  })

  $("#stop-bt3").click(function() {
    $("#audio-player3")[0].pause();
    $("#audio-player3")[0].currentTime = 0;
    $("#message").text("Music Stopped");
  })
})

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<section class="grid_12" id="content">

  <div class="grid_4 alpha">
    <div class="audiobox">
      <audio id="audio-player" name="audio-player" src="images/electronic beat-monksee.mp3">audio</audio>

      <div class="controlsbox">
        <a id="play-bt">
          <div class="animated_play"></div>
        </a>
        <a id="pause-bt">
          <div class="animated_stop"></div>
        </a>


      </div>

    </div>
  </div>
  <div class="grid_4">
    <div class="audiobox">
      <audio id="audio-player1" name="audio-player" src="images/electronic beat-monksee.mp3">audio</audio>

      <div class="controlsbox">
        <a id="play-bt1" href="#">
          <div class="animated_play"></div>
        </a>
        <a id="pause-bt1" href="#">
          <div class="animated_stop"></div>
        </a>


      </div>

    </div>
  </div>
  <div class="grid_4 omega">
    <div class="audiobox">
      <audio id="audio-player2" name="audio-player" src="images/beatbox.mp3">audio</audio>

      <div class="controlsbox">
        <a id="play-bt2">
          <div class="animated_play"></div>
        </a>
        <a id="pause-bt2">
          <div class="animated_stop"></div>
        </a>


      </div>

    </div>
  </div>




  <div class="grid_4 alpha">
    <div class="audiobox">
      <audio id="audio-player3" name="audio-player" src="images/electronic beat-monksee.mp3">audio</audio>

      <div class="controlsbox">
        <a id="play-bt3">
          <div class="animated_play"></div>
        </a>
        <a id="pause-bt3">
          <div class="animated_stop"></div>
        </a>


      </div>

    </div>
  </div>
  <div class="grid_4">
    <div class="audiobox">
      <audio id="audio-player4" name="audio-player" src="images/electronic beat-monksee.mp3">audio</audio>

      <div class="controlsbox">
        <a id="play-bt4">
          <div class="animated_play"></div>
        </a>
        <a id="pause-bt4">
          <div class="animated_stop"></div>
        </a>


      </div>

    </div>
  </div>
  <div class="grid_4 omega">
    <div class="audiobox">
      <audio id="audio-player5" name="audio-player" src="images/beatbox.mp3">audio</audio>

      <div class="controlsbox">
        <a id="play-bt5">
          <div class="animated_play"></div>
        </a>
        <a id="pause-bt5">
          <div class="animated_stop"></div>
        </a>


      </div>

    </div>
  </div>


  <div class="grid_4 alpha">
    <div class="audiobox">
      <audio id="audio-player6" name="audio-player" src="images/electronic beat-monksee.mp3">audio</audio>

      <div class="controlsbox">
        <a id="play-bt6">
          <div class="animated_play"></div>
        </a>
        <a id="pause-bt6">
          <div class="animated_stop"></div>
        </a>


      </div>

    </div>
  </div>
  <div class="grid_4">
    <div class="audiobox">
      <audio id="audio-player7" name="audio-player" src="images/electronic beat-monksee.mp3">audio</audio>

      <div class="controlsbox">
        <a id="play-bt7">
          <div class="animated_play"></div>
        </a>
        <a id="pause-bt7">
          <div class="animated_stop"></div>
        </a>


      </div>

    </div>
  </div>
  <feature class="grid_4 omega">
    <div class="audiobox">
      <audio id="audio-player8" name="audio-player" src="images/beatbox.mp3">audio</audio>

      <div class="controlsbox">
        <a id="play-bt8">
          <div class="animated_play"></div>
        </a>
        <a id="pause-bt8">
          <div class="animated_stop"></div>
        </a>


      </div>

    </div>
  </feature>


</section>

Answer 1

コードの重複を避けるために、変数部分のパラメーターを使用して、一般的な動作の関数を導入する必要があります。

あなたの例の最初の部分から始めて：

$(document).ready(function(){
    $("#play-bt1").click(function(){
        $("#audio-player1")[0].play();
        $("#message").text("Music started");
    })

    $("#pause-bt1").click(function(){
        $("#audio-player1")[0].pause();
        $("#message").text("Music paused");
    })

    $("#stop-bt1").click(function(){
        $("#audio-player1")[0].pause();
        $("#audio-player1")[0].currentTime = 0;
        $("#message").text("Music Stopped");
    })
})

この構成要素を関数でラップできます。最初のステップは、この関数の適切な名前を見つけることです。この関数はドキュメントの準備ができたときにプレーヤーを初期化するため、明示的な名前はinitPlayerWhenDocumentReadyです。関数にラップすると、コードは次のようになります。

function initPlayerWhenDocumentReady(){
    $(document).ready(function(){
        $("#play-bt1").click(function(){
            $("#audio-player1")[0].play();
            $("#message").text("Music started");
        })

        $("#pause-bt1").click(function(){
            $("#audio-player1")[0].pause();
            $("#message").text("Music paused");
        })

        $("#stop-bt1").click(function(){
            $("#audio-player1")[0].pause();
            $("#audio-player1")[0].currentTime = 0;
            $("#message").text("Music Stopped");
        })
    })
}

次のステップは、変数部分のパラメーターを抽出することです。1 つの可能性は、個別のパラメーターplayerId, playButtonId, pauseButtonId,を追加することstopButtonIdです。

しかし、よく見ると、すべての識別子が同じ形式に従っているように見え、末尾の数字のみが変化しているように見えます: 1, 2, 3. したがって、数値の 1 つのパラメーターを追加するだけで済みますplayerNumber。

function initPlayerWhenDocumentReady( playerNumber ){
    $(document).ready(function(){
        $("#play-bt"+playerNumber).click(function(){
            $("#audio-player"+playerNumber)[0].play();
            $("#message").text("Music started");
        })

        $("#pause-bt"+playerNumber).click(function(){
            $("#audio-player"+playerNumber)[0].pause();
            $("#message").text("Music paused");
        })

        $("#stop-bt"+playerNumber).click(function(){
            $("#audio-player"+playerNumber)[0].pause();
            $("#audio-player"+playerNumber)[0].currentTime = 0;
            $("#message").text("Music Stopped");
        })
    })
}

次に、この関数を呼び出して 3 つのプレーヤーを初期化できます。

initPlayerWhenDocumentReady( 1 );
initPlayerWhenDocumentReady( 2 );
initPlayerWhenDocumentReady( 3 );

異なる値で同じ関数を呼び出すと、重複するコードを減らしながら同様のコードを実行できます。呼び出しだけが繰り返されます。

そして、この限定された重複でさえも、ループを使用することで回避できます。ここでinitPlayersは、プレイヤーの総数をパラメーターとして受け取る新しい関数 で定義されています。

function initPlayers( total ) {
    for (var i = 1; i <= total; i++ ) {
        initPlayerWhenDocumentReady( i );
    }
}

initPlayers( 3 );