如何避免在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");
        })
    })
}

下一步是提取变量部分的参数。一种可能性是添加单独的参数playerId，playButtonId，pauseButtonId，stopButtonId。

但从第二眼看，似乎所有标识符都遵循相同的格式，只有最后的数字会更改：1，2，3。因此，我们只需为数字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");
        })
    })
}

然后你可以调用这个函数初始化三个玩家：

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

使用不同值调用相同函数允许运行类似代码，同时减少重复代码：仅重复调用。

通过使用一个循环来避免这种有限的重复，这个循环在新函数initPlayers中定义，它将玩家总数作为参数：

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

initPlayers( 3 );