選擇多個div，但與jQuery播放不同的音頻

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