如何在切換此元素時顯示不同的圖像，而不是文本

Question

我正在處理已完成大部分工作的項目。我只想改變這個元素來顯示圖像，而不是文本「暫停音頻」和「繼續音頻」。

在此先感謝。

var player = new MediaElementPlayer('audio', { 
    audioWidth: 0, 
    features: [], 
    success: function (mediaElement, domObject) {} 
}); 

var audioOn = true; 
    var audioSrc = ''; 
    function playSoundClip(path) 
    { 
     player.pause(); 
     audioSrc = path; 
     player.setSrc(audioSrc);   
     if (audioOn) 
     { 
      player.play(); 
     } 
    } 
    function audioToggle(toggleAnchor) 
{ 
    if (audioOn) 
    { 
     player.pause(); 
     audioOn = false; 
     $(toggleAnchor).html('**Continue Audio**'); 
    } 
    else 
    { 
     audioOn = true; 
     $(toggleAnchor).html('**Pause Audio'**); 
     if (audioSrc.length > 0) 
     { 
      player.play(); 
     } 
    } 
} 

Answer 1

只需將您的<img> html放入.html（）函數中即可。

$(toggleAnchor).html('<img src="my/img/src.jpg">');

Answer 2

您應該添加圖片到HTML文檔第一，所以用戶不會不斷地從主機請求相同的圖像。這有助於減少帶寬使用，並且還會停止圖像閃爍（當加載新圖像時）。例如（包含在元素中）：

<img src="img/blah" id="img1" style="display:none;"> 
<img src="img/blah" id="img2" style="display:inline;"> 

然後僅切換其顯示屬性。這也可以使用Jquery的hide()和show()（如果需要）完成。下面是一個示例切換功能：

function toggle(){ 
    if ($('img1').css('display') == 'none') { 
     $('img1').css('display') = 'inline'; 
     $('img2').css('display') = 'none'; 
    } 
    else { 
     $('img1').css('display') = 'none'; 
     $('img2').css('display') = 'inline'; 
    } 
}