Question

我目前正在尝试创建一个音板，以学习一些更高级的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();
    }
});

});

Answer 1

尝试一下：

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

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

Answer 2

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

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

    // etc...
});

Working Example - jsFiddle

选择多个div但使用jQuery播放不同的音频

2 个答案: