如何僅在正在播放音頻的圖標上更改圖標的狀態？

Question

你好我已經完成了下面的代碼，但是當我播放一個聲音時，它似乎改變了所有div的圖標，而不僅僅是正在播放的圖標。任何想法如何解決這個問題？

https://jsfiddle.net/1rdoxe84/1/

JS

$('.playButton').hover(function() { 
    $(this).addClass("m-icon--hovered");  
}, function() { 
    $(this).removeClass("m-icon--hovered"); 
}); 

var playing = false; 
var sound; 
var icon = $('.playButton'); 
$('.audio').on('click', function() { 
    if(playing === false){ 
     playing = true; 
     sound = $(this).children()[1]; 
     sound.play(); 
     icon.attr('src','https://cdn2.iconfinder.com/data/icons/ios-tab-bar/25/Pause-512.png'); 
     setTimeout(function(){ 
     playing = false; 
      sound.pause(); 
      sound.currentTime = 0; 
      icon.attr('src','http://www.wayfm.com/wp-content/uploads/2014/06/playButton-150x150.png'); 
     },3000); 
    } else { 
     playing = false; 
     sound.pause(); 
     sound.currentTime = 0; 
     icon.attr('src','https://cdn2.iconfinder.com/data/icons/ios-tab-bar/25/Pause-512.png'); 
    } 
}); 

Answer 1

嘗試

... 
$('.audio').on('click', function() { 
    var icon = $(this).find('.playButton'); 
    ...