如何在循环中更新html标记的值而不覆盖前几轮

How to update the value of a html tag in a loop without overriding previous rounds

本文关键字：覆盖 几轮 循环 更新 html      更新时间：2023-09-26

我有一些曲目的url列表。我想在html列表中显示每个曲目的持续时间。我可以设法从函数中获取duration值，但问题是在循环的每一轮中，它都会用从duration函数中获取的新值覆盖给定的标记。因此，整个列表会不断更新。

var src1, src2, src3, trackArray;
src1 = "https://goo.gl/o4nxfq";
src2 = "https://goo.gl/wc1pgB";
src3 = "https://goo.gl/25uOY6";
trackArray = [src1, src2, src3];
function initAudioPlayer(){
	$.each(trackArray, function( index, value ) {
  	$(".panel").append(
    	"<li>Track #"+ index +" >> <span class='due'></span></li>"
    );
    getDuration(value, ".due");
	});
}
function getDuration(src, destination) {
    var audio = new Audio();
    $(audio).on("loadedmetadata", function(){
        $(destination).html(audio.duration);
        
    });
    audio.src = src;
}
$(document).ready(function(){
    initAudioPlayer();
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul class="panel"></ul>

正如您所看到的，它显示了所有li标记的最后一轮循环的值。有什么想法可以修复它，使其在列表中显示真实值吗？

通过.due，您的目标是具有类due的所有元素。你也应该通过index，例如：

var src1, src2, src3, trackArray;
src1 = "https://goo.gl/o4nxfq";
src2 = "https://goo.gl/wc1pgB";
src3 = "https://goo.gl/25uOY6";
trackArray = [src1, src2, src3];
function initAudioPlayer(){
	$.each(trackArray, function( index, value ) {
  	$(".panel").append(
    	"<li>Track #"+ index +" >> <span class='due'></span></li>"
    );
    getDuration(value, ".due", index);
	});
}
function getDuration(src, destination, index) {
    var audio = new Audio();
    $(audio).on("loadedmetadata", function(){
        $(destination).eq(index).html(this.duration);
        
    });
    audio.src = src;
}
$(document).ready(function(){
    initAudioPlayer();
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul class="panel"></ul>

var src1, src2, src3, trackArray;
src1 = "https://goo.gl/o4nxfq";
src2 = "https://goo.gl/wc1pgB";
src3 = "https://goo.gl/25uOY6";
trackArray = [src1, src2, src3];
function initAudioPlayer(){
	$.each(trackArray, function( index, value ) {
  	$(".panel").append(
    	"<li>Track #"+ index +" >> <span class='due'></span></li>"
    );
    getDuration(value, ".due");
	});
}
function getDuration(src, destination) {
    var audio = new Audio();
    $(audio).on("loadedmetadata", function(){
        $(destination).html(audio.duration);
        
    });
    audio.src = src;
}
$(document).ready(function(){
    initAudioPlayer();
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul class="panel"></ul>

给每个跨度一个唯一的类，例如

在这个例子中，它将是.due0，.due1，…，而不是.due

如果您使用的是类名。由于样式的原因，每个跨度也将有类别due和due#

function initAudioPlayer(){
    $.each(trackArray, function( index, value ) {
        $(".panel").append(
            "<li>Track #"+ index +" >> <span class='due due"+index+"'></span></li>"
        );
        getDuration(value, ".due"+index);
    });
}
相关文章：