0

私は現在、より高度な jQuery テクニックを学ぶためだけにサウンドボードを作成しようとしています。

現在、各 div はサウンドを表す jQuery 関数に関連付けられています。div をクリックすると、それぞれのサウンドが再生されます。現在の状態では、各関数を個別の関数として記述しているため、時間の経過とともに冗長なコードが発生します。

関数を抽象化して、適切なオーディオ ファイルを開始する任意の div クリックを表す 1 つの関数を構築する方法があるかどうかに興味があります。

以下のコードを参照してください。

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

これにより、クリック時にアイテムのインデックス番号が取得され、そのインデックス番号に基づいてそれぞれのオーディオ要素が選択されます (1 対 1 のマッチングであるため)。

于 2013-04-12T22:06:44.653 に答える