通过jquery将data-src更改为src

Question

我正在使用一个flexslider，它为每张幻灯片提供了音频文件，但我不想立即在页面上加载无数的音频文件。因此，我尝试让data-src成为每张幻灯片后的src。

幻灯片目前如下所示：

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

在after函数中，我想将data-src改为src。任何帮助都将非常感谢如何从data-src转到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

在after函数中，获取当前可见的幻灯片，然后获取该幻灯片上的auto及其源代码。接下来，检查它是否已经具有src属性。如果不是，则将其设置为它自己的.data('src')。将其添加到flexslider对象中。

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