3

我最近才开始学习 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>

4

1 回答 1

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 );
于 2014-09-10T17:27:08.817 回答