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

Posted 2023-02-25

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

【英文标题】：How to update the value of a html tag in a loop without overriding previous rounds

【发布时间】：2016-01-07 13:25:10

【问题描述】：

我有一些曲目的网址列表。我想在 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 标记的最后一轮循环的值。 任何想法修复它，以便它显示列表中的真实值？

【问题讨论】：

给每个跨度一个唯一的类或 id 或其他东西 - 然后在“目标”参数中使用它

是的，因为 ".due" 匹配所有...我会使用 index 代替

【参考方案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>

【参考方案2】：

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

在这个例子中，不是 .due，而是 .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);
    );