如何更新在循环中的HTML标签的价值没有覆盖previous轮 [英] How to update the value of a html tag in a loop without overriding previous rounds

问题描述

我有一些歌曲的URL列表。我想告诉每首曲目的持续时间在一个HTML列表。我可以设法采取从函数的持续时间值，但问题是在每一轮它覆盖与持续时间功能采取的新值定标记循环。所以整个列表被一遍又一遍更新。

\r

\r

VAR SRC1，SRC2，SRC3，trackArray;\r
SRC1 =htt​​ps://goo.gl/o4nxfq;\r
SRC2 =htt​​ps://goo.gl/wc1pgB;\r
SRC3 =htt​​ps://goo.gl/25uOY6;\r
trackArray = [SRC1，SRC2，SRC3]\r
功能initAudioPlayer（）{\r
$。每个（trackArray，功能（指数值）{\r
  $（小组）。追加（\r
    ＆LT;李＆GT;跟踪＃+指数+＆GT;＆GT;＆LT;跨度类='因'＆GT;＆LT; / SPAN＆GT;＆LT; /李＆gt;中\r
    ）;\r
    getDuration（价值​​。由于）;\r
}）;\r
}\r
\r
功能getDuration（SRC，目的地）{\r
    VAR音频=新的音频（）;\r
    $（音）。在（等待load​​edmetadata功能（）{\r
        $（目标）的.html（audio.duration）;\r
        \r
    }）;\r
    audio.src = SRC;\r
}\r
\r
$（文件）。就绪（函数（）{\r
    initAudioPlayer（）;\r
}）;

\r

＆LT;脚本SRC =htt​​ps://ajax.googleapis.com/ajax /libs/jquery/2.1.1/jquery.min.js\"></script>\r
＆LT; UL类=面板＆GT;＆LT; / UL＆GT;

\r

\r

\r

正如你可以看到它显示上一轮循环的所有里标签的价值。
任何想法解决它，所以它会显示在列表中的实际值？

解决方案

给每个跨越例如一类独特的

在这个例子中，代替。由于，这将是.due0，.due1，...

如果你使用的是类的名字。由于为造型，每跨还将有类由于以及由于＃

 函数initAudioPlayer（）{
    $。每个（trackArray，功能（指数值）{
        $（小组）。追加（
            ＆LT;李＆GT;跟踪＃+指数+＆GT;＆GT;＆LT;跨度类='由于因+指数+'＆GT;＆LT; / SPAN＆GT;＆LT; /李＆gt;中
        ）;
        getDuration（价值​​。由于+指数）;
    }）;
}
 

I have a list of url of some tracks. I want to show the duration of each track in a html list. I could manage to take the duration value from a function but the problem is in each round of the loop it overrides the given tag with the new value taken from duration function. So the whole list gets updated over and over.

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>

As you can see it show the value of the last round of loop for all li tags. Any idea fix it so it will show the real values in the list?

解决方案

Give each span a unique class for example

In this example, instead of .due, it'll be .due0, .due1, ...

in case you are using class name .due for styling, each span will also have the class due as well as due#

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

这篇关于如何更新在循环中的HTML标签的价值没有覆盖previous轮的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！