CODEWITHSUNDEEP
jqueryhtmlbuttonsvg
Eric Wood
Eric Wood

Reputation: 589

Replacing SVG using jQuery

I have a button that's setup like this:

<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>

I'm calling in the SVG at the top of my , like so:

<!-- 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 -->

The button itself is controlling a vimeo video. When the play button is clicked, but the vimeo video is paused, I'm also using jQuery to replace the text in this button to say "continue". When the video is finished playing, the text in this button says "replay."

Here's how I'm replacing the text:

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

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

I'd like to be able to replace the SVG icon on Pause and Finish as well. I'm thinking the continue icon could stay the same as the play icon, but I want a new icon for the replay button.

I tried adding the svg from my button into the jQuery, but it's causing errors. eg:

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

Any thoughts on how I could accomplish this?

Upvotes: 0

Views: 2427

Answers (1)

dzny
dzny

Reputation: 374

Your mixed use of double and single quotes is causing the error.

This code:

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

Should be:

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

I've simply switched out the outermost quotation marks. Give it a shot.

Upvotes: 2

Related Questions