Javascript - 更改圖片並在點擊時更改音頻

Question

基本上，我試圖在我的網站上創建這個東西，當您單擊圖片時，圖片會發生變化。當圖片發生變化時，音頻文件會說些什麼。

例如，如果您有「那是簡單的按鈕」，您可以點擊它並將其更改爲Shia Labeouf，並且音頻文件顯示「只是做它！」。

有沒有人知道如何做到這一點，或者如果你可以讓我走向正確的方向去做這樣的事情？

Answer 1

您應該使用Jquery一個Javascript庫，this is the code you need，但當然你學習一些關於它的更好，所以你可以擴展它：

HTML：

<span class="btn">That was Easy Button</span> 

的Javascript：

$(document).ready(function() { 
    $('.btn').click(function() { 
     $(this).html('JUST DO IT!');     
    }); 
}); 

PS 這隻會改變按鈕的文本，繼續嘗試添加代碼來打開音頻（提示：Play an audio file using jQuery when a button is clicked）

Answer 2

Here爲你

在本例中的示例中，圖像（來自維基百科）被顯示給用戶。當用戶點擊圖像時，列表中的另一個將替換上一個。有3個圖像定義和腳本循環。

HTML

<div id="clickable"> 
    <img src="https://en.wikipedia.org/wiki/Sparrow#/media/File:House_Sparrow_mar08.jpg"/> 
</div> 

JS代碼

var data = [ "https://upload.wikimedia.org/wikipedia/commons/thumb/f/f5/House_Sparrow_mar08.jpg/1024px-House_Sparrow_mar08.jpg", 
     "https://upload.wikimedia.org/wikipedia/commons/thumb/e/ec/Ara_ararauna_Luc_Viatour.jpg/1024px-Ara_ararauna_Luc_Viatour.jpg", 
     "https://upload.wikimedia.org/wikipedia/commons/thumb/4/4e/Rose-ringed_Parakeet_eating_leaves.JPG/1024px-Rose-ringed_Parakeet_eating_leaves.JPG" ]; 
var ind = 0; 

function swap(){ 
    ind ++; 
    $('#clickable').html('<img src="' + data[ind % 3] + '"/>'); 
} 

$('#clickable').on('click', swap); 

swap(); 

我沒有提供音頻。但是這應該足以給你一個想法。

我的示例使用JQuery

希望它能幫助。