使用追加插入身份證件和有聲演

Question

我在試圖收藏夾列表添加到音板的早期作品是（我已經得到了localStorage的東西的工作）。我的音頻工作方式是從按鈕中獲取ID並將.mp3添加到它然後播放它，這是可行的。我的代碼就是當你按下一個按鈕，它需要它的ID，並創建另一個按鈕，插入該ID到它應該發揮的聲音相同的方式，其他按鈕做，但事實並非如此。有任何想法嗎？代碼實際上是相同的，但只是在.append創建按鈕時似乎不會播放聲音。

相關favorite.js的Javascript

//audio 
 
var audios = Array.prototype.map.call(
 
    document.getElementsByName("names"), 
 
    function(el) { 
 
    var audio = new Audio(); 
 
    var src = "mp3/" + el.id + ".mp3"; 
 
    el.onclick = function() { 
 
     audio.src = src; 
 
     audio.play(); 
 
    }; 
 
    return audio; 
 
    }); 
 

 
//favorited sound 
 
function reply_click(clicked_id) { 
 
    alert("Added to Favorites"); 
 
    $('#add').append('<span><a href="#/" id="' + clicked_id + '" name="names" class="buttonsf">Sound1</a></span>'); 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div> 
 
    <a href="#/" id="Sound1" onClick="reply_click(this.id)">Sound1</a> 
 
</div> 
 
<div id="add"> 
 

 
</div> 
 
<script type="text/javascript" src="favorite.js"></script>

Answer 1

傳遞給Click事件中值應採取Event

因此，改變onclick="reply_click(this.id)"到onclick="reply_click(event)"該事件將傳遞給函數。

然後從clicked_id改變功能參數e（或你希望它被稱爲表示它是一個事件什麼都），您可以通過使用e.currentTarget.id和插入訪問該ID。

硒我下面的例子：

//audio 
 

 
function playAudio(e) { 
 
    let el = e.currentTarget 
 
    var audio = new Audio(); 
 
    var src = "mp3/" + el.id + ".mp3"; 
 
    audio.src = src; 
 
    audio.play(); 
 
    return audio; 
 
} 
 

 
function createListeners() { 
 
    let names = document.getElementsByName("names") 
 
    for (let i = 0; i < names.length; i++) { 
 
    let name = names[i] 
 
    name.removeEventListener('click', playAudio) 
 
    name.addEventListener('click', playAudio) 
 
    } 
 
} 
 

 
document.addEventListener('DOMContentLoaded', e => { 
 
    createListeners() 
 
}) 
 

 
//favorited sound 
 
function reply_click(e) { 
 
    alert("Added to Favorites"); 
 
    $('#add').append('<span><a href="#/" id="' + e.currentTarget.id + '" name="names" class="buttonsf">Sound1</a></span>'); 
 
    createListeners() 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div> 
 
    <a href="#/" id="Sound1" onClick="reply_click(event)">Sound1</a> 
 
</div> 
 
<div id="add"> 
 

 
</div> 
 
<script type="text/javascript" src="favorite.js"></script>