Question

我使用的是一张幻灯片，每张幻灯片都有音频文件，但我不想立即在页面上加载无数的音频文件。所以我试图让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

试试这个：

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

这会将网址从data-src移至src，然后移除data-src属性。

Answer 2

无法重命名属性。您可以创建新属性并删除旧属性。假设有一个点击事件，可以如下所示。请根据您的要求调整活动。

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

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

Answer 3

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

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

通过jquery将data-src更改为src

3 个答案: