如何避免JavaScript中只有id值更改的重复代码？

我最近才开始学习HTML和HTML5。我的网站包括不同的音频播放器播放不同的曲调/MP3。目前，我已经为每个音频播放器和每个播放/暂停和停止按钮创建了不同的id名称

我的JavaScript文件播放类似的代码时有不必要的重复。我想有一种更好的方法可以使用变量来实现这一点，这样代码就不会用不同的id名称重复，但我对JavaScript不太熟悉

下面是我的JavaScript文件片段的样子

$（文档）.ready（函数（）{
$（“#play-bt1”）。单击（函数（）{
$（“#音频播放器1”）[0]。播放（）；
$（“#消息”）.text（“音乐开始”）；
})
$（“#暂停-bt1”）。单击（函数（）{
$（“#音频播放器1”）[0]。暂停（）；
$（“#消息”）。文本（“音乐暂停”）；
})
$（“#stop-bt1”）。单击（函数（）{
$（“#音频播放器1”）[0]。暂停（）；
$（“#音频播放器1”）[0].currentTime=0；
$（“#消息”）。文本（“音乐停止”）；
})
})
$（文档）.ready（函数（）{
$（“#play-bt2”）。单击（函数（）{
$（“#音频播放器2”）[0]。播放（）；
$（“#消息”）.text（“音乐开始”）；
})
$（“#暂停-bt2”）。单击（函数（）{
$（“#音频播放器2”）[0]。暂停（）；
$（“#消息”）。文本（“音乐暂停”）；
})
$（“#stop-bt2”）。单击（函数（）{
$（“#音频播放器2”）[0]。暂停（）；
$（“#音频播放器2”）[0].currentTime=0；
$（“#消息”）。文本（“音乐停止”）；
})
})
$（文档）.ready（函数（）{
$（“#play-bt3”）。单击（函数（）{
$（“#音频播放器3”）[0]。播放（）；
$（“#消息”）.text（“音乐开始”）；
})
$（“#暂停-bt3”）。单击（函数（）{
$（“#音频播放器3”）[0]。暂停（）；
$（“#消息”）。文本（“音乐暂停”）；
})
$（“#stop-bt3”）。单击（函数（）{
$（“#音频播放器3”）[0]。暂停（）；
$（“#音频播放器3”）[0].currentTime=0；
$（“#消息”）。文本（“音乐停止”）；
})
})

音频
音频
音频
音频
音频
音频
音频

为了避免代码重复，您需要为常见行为引入一个函数，并为可变部分引入参数

从示例的第一部分开始：

$(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");
    })
})

我们可以将这个构建块包装在一个函数中。第一步是为这个函数找到一个好名字。由于函数在文档准备就绪时初始化播放机，因此显式名称为

initplayerhendocumentready

。在函数中，代码变成：

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

，

playbutonid

，

pauseButtonId

，

stopbutonid

但再看一眼，似乎所有标识符都遵循相同的格式，只有末尾的数字发生了变化：

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

函数初始化播放器（总计）{
对于（var i=1；您好，谢谢您的回答。我现在才看到它。自2013年我提出这个问题以来，我已经编写了全新的代码，只涉及一个音频播放器，它可以更改歌曲选择的src。您的回答看起来会起作用：）谢谢您的贡献：）