Change src data to src via jquery

Question

Im using flexslider, which has audio files for each slide, but I don’t want to download countless audio files on the page right away. Thus, I am trying to get data-src to become src after each slide

slides currently look like this:

<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 for moving from data-src to src

Answer 1

. . , click, , . , .

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

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

Answer 2

:

$('source').attr("src", $(this).data('src'));
$('source').removeAttr('data-src');

url data-src src, data-src.

Answer 3

Inside the after function, get the current visible slide, and then get the car and its source. Then check if it already has an attribute src. If not, then set your own for it .data('src'). Add this to the flexslider object.

after: function(){
    var $currentAudio = $('.flex-active-slide audio source');
    if(!$currentAudio.attr('src')){
        $currentAudio.attr('src', $currentAudio.data('src'));
    }
}