Question

我有一个按钮设置如下：

<a class="playbutton" title="Watch Now"><svg class="icon icon-play" viewBox="0 0 25 25"><use xlink:href="#icon-play"></use></svg> Watch Now</a>

我在我的顶部调用SVG，就像这样：

<!-- START LOAD SVG -->
<svg display="none" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="25" height="25" viewBox="0 0 25 25"><defs>
<g id="icon-play">
<path class="path1" d="M12.5 0c-6.904 0-12.5 5.596-12.5 12.5s5.596 12.5 12.5 12.5 12.5-5.596 12.5-12.5-5.596-12.5-12.5-12.5zM12.5 22.656c-5.609 0-10.156-4.547-10.156-10.156s4.547-10.156 10.156-10.156 10.156 4.547 10.156 10.156-4.547 10.156-10.156 10.156zM9.375 7.031l9.375 5.469-9.375 5.469z"></path>
</g>
</defs></svg>
<!-- END LOAD SVG -->

按钮本身正在控制vimeo视频。单击播放按钮但暂停vimeo视频时，我还使用jQuery替换此按钮中的文本以说“＆＃34;继续＆＃34;”。视频播放完毕后，此按钮中的文字会显示＆＃34;重播。＆＃34;

以下是我如何替换文字：

function onPause(id) {
    $('a.playbutton').text("continue");
}

function onFinish(id) {
    $('a.playbutton').text("replay");
}

我希望能够在暂停和完成时替换SVG图标。我认为继续图标可以与播放图标保持一致，但我想要一个重播按钮的新图标。

我尝试将我的按钮中的svg添加到jQuery中，但它会导致错误。例如：

$('a.playbutton').html("<svg class="icon icon-play" viewBox="0 0 25 25"><use xlink:href="#icon-play"></use></svg> continue");

关于如何实现这一目标的任何想法？

Answer 1

混合使用双引号和单引号会导致错误。

此代码：

$('a.playbutton').html("<svg class="icon icon-play" viewBox="0 0 25 25"><use xlink:href="#icon-play"></use></svg> continue");

应该是：

$('a.playbutton').html('<svg class="icon icon-play" viewBox="0 0 25 25"><use xlink:href="#icon-play"></use></svg> continue');

我只是改掉了最外面的引号。试一试。

使用jQuery替换SVG

1 个答案: