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

Question

我有一些轨道的网址列表。我想在 html 列表中显示每个轨道的持续时间。我可以设法从函数中获取持续时间值，但问题是在循环的每一轮中，它都会使用从持续时间函数中获取的新值覆盖给定的标记。因此整个列表会一遍又一遍地更新。

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 标记的最后一轮循环的值。 有什么想法可以修复它，以便它将显示列表中的真实值吗？

Answer 1

通过 .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>