Question

我正在完成已经完成大部分工作的项目。我只想更改此元素以显示图像而不是文本＆＃34;暂停音频＆＃34;和＆＃34;继续音频＆＃34;。

提前致谢。

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';
    }
}

如何切换此元素而不是文本时，如何显示不同的图像

2 个答案: