0

我目前正在尝试创建一个音板，只是为了学习一些更高级的 jQuery 技术。

目前，每个 div 都与一个代表声音的 jQuery 函数相关联。单击 div 时，会播放相应的声音。在当前状态下，我将每个函数编写为单独的函数，超时会导致冗余代码。

好奇是否有一种方法可以抽象该函数以构建一个代表任何 div 单击的函数，然后该函数将启动适当的音频文件。

请参见下面的代码：

HTML

<div id="wrapper">
        <h1>Soundboard Trials</h1>
        <div id="boxes">
            <li id="nyan"><audio src="song.mp3"/></li>
            <li id="duck"><audio src="duck.mp3"/></li>
            <li id="duck"><audio src="cat.mp3"/></li>
        </div>
    </div>

CSS

#wrapper {
    width: 800px;
    margin: auto;
}

#boxes {
    padding: 0;
    margin: 50px auto;
    list-style: none;
}


#boxes li {
    width: 150px;
    height: 150px;
    background-color: #aaa;
    margin: 5px;
    float: left;
    cursor: pointer;}

jQuery

$(function(){
$("#nyan").click(function(){
    var audio = $('audio')[0];
    if (audio.paused){
        audio.play();
    } else {
        audio.pause();
    }
});

$("#duck").click(function(){
    var audio = $('audio')[1];
    if (audio.paused){
        audio.play();
    } else {
        audio.pause();
    }
});
$("#cat").click(function(){
    var audio = $('audio')[2];
    if (audio.paused){
        audio.play();
    } else {
        audio.pause();
    }
});

});
4

2 回答 2

0

您可以根据列表的上下文（容器）进行选择。如：

$(document).on("click.mySoundboard", "#boxes li", function (event) {
    var $audio = $("audio", event.target);
    console.log($audio.attr("src"));

    // etc...
});

工作示例 - jsFiddle

于 2013-04-12T22:14:58.163 回答
0

试试这个：

<div id="boxes">
    <li id="nyan" class="audioclick"><audio src="song.mp3"/></li>
    <li id="duck" class="audioclick"><audio src="duck.mp3"/></li>
    <li id="duck" class="audioclick"><audio src="cat.mp3"/></li>
</div>

$(function(){
    $('#boxes').on('click','audioclick',function(){
        var $eq = $(this).eq(),
            audio = $('audio').get($eq);

        if (audio.paused){
            audio.play();
        } else {
            audio.pause();
        }
    });
});

这应该在单击时获取项目的索引号，然后根据该索引号选择相应的音频元素（因为它是一对一的匹配）。

于 2013-04-12T22:06:44.653 回答