如何仅在正在播放音频的图标上更改图标的状态？

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');
    ...