Question

我需要在点击图片时用＆＃34; iconfalse.jpg＆＃34; 更改图片＆＃34; icontrue，jpg＆＃34; ，当我在此图片中点击另一个时，我需要返回 icontrue.jpg ，

当图标设置为＆＃34; iconfalse.jpg＆＃34;我需要这个功能：

document.getElementById('myaudio').muted = true;

当回到＆＃34; icontrue.jpg＆＃34;我要求相反：

document.getElementById('myaudio').muted = false;

我尝试了10个方法来构建这个脚本，在stackoverflow和其他方法中搜索，但是不允许任何方法。

我构建的所有方法都不会返回原始图像而不会取消静音。谢谢你的回答。

Answer 1

<强> jsBin demo

而不是图片使用<span>作为你的ico按钮：

<span data-audio="song1.ogg"></span> 
<span data-audio="song2.ogg"></span>

现在让我们简单地创建我们的＆＃34; Play / Stop＆＃34;我们的SPAN元素的图标，
在SPAN上单击我们，然后使用jQuery切换.stop类

<强> CSS

[data-audio]{
    cursor:pointer;
    display:inline-block;
    vertical-align:middle;
    width:20px;
    height:20px;
    background: url(ico-play.jpg);
}
[data-audio].stop{
    background: url(ico.stop.jpg);
}

<强>的jQuery

var $btn  = $("[data-audio]"),
    AUDIO = new Audio();

$btn.click(function() {     
    $btn.not(this).removeClass('stop');
    $(this).toggleClass('stop');    
    AUDIO.src = $(this).data().audio;
    AUDIO[ $(this).hasClass('stop') ? "play" : "pause" ]();
});

使用jquery为静音/取消静音音频播放器交换图像

1 个答案: