Change data-src to src via jquery

Question

Im using a flexslider that has audio files for each slide, but I don't want to load countless audio files right away on the page. So im trying to get the data-src to become the src after each slide

the slides are currently as follows:

<div class="flexslider carousel">
<ul class="slides">
<li> 
<img src="http://www.quinnmedical.com/skin/frontend/gigasavvy/quinn/ppt/Slide01.jpg"  /> 
<audio id="demo" controls>
   <source src="/skin/frontend/gigasavvy/quinn/audio/Slide1.mp3" type="audio/mpeg" />
</audio>
</li>
<li> 
<img src="http://www.quinnmedical.com/skin/frontend/gigasavvy/quinn/ppt/Slide03.jpg"  /> 
<audio id="demo" controls>
   <source data-src="/skin/frontend/gigasavvy/quinn/audio/Slide3.mp3" src="" type="audio/mpeg" />
</audio>
</li>
</ul>
</div>

In the after function i want to change data-src to src. Any help would be greatly appreciated as how to go from data-src to src

Answer 1

Renaming an attribute will not be possible. you can create new attributes and remove the old attribute. Suppose if there is a click event, it will be possible as as below. Please movdiy the event according to your requirement.

    $('#demo').on("click", "img", function () {
    var t = this;
    var source = $(t).children("source");        
    $source.attr({
        src: $t.attr('data-src')

    }).removeAttr('data-src');
 }