javascript - 如何从元素获取值并在 javascript 选项中使用它

Question

我有一个由 Adob​​e Muse 生成的简单 html(我无法直接更改它):

<div id="randomID" title="counter"><p>1290</p></div>

我从 CountUp 脚本中有以下选项:

var counter = new countUp( 'counterID', 0, *Some Value*, 0, 2 ); 
counter.start(); // run counter

问题是:

我需要查找带有 title="counter" 的所有元素，为每个<p>设置ID ，然后从 <p>1290</p> 获取值，将其放入脚本选项中并分别运行每个计数器。

我尝试这样做:

var counters={};
$("[title='counter']").each(function(){
counters['counter' + this.id]=$(this).children('p').html();   });

$.each( counters, function( id, value ) {
var id = new countUp( $('#' + id), 0, value, 0, 2 );
id.start();
});

我哪里错了？

Answer 1

我相信您正在寻找的可能是这样的:

/* jquery */
var result={};
$("div[title=counter]").each(function(){
    result[this.id]=$(this).find("p").html();    
});
console.log(result);

/* pure js */
var result2={};
var allP=document.getElementsByTagName("p");
for(var i=0, len=allP.length; i<len; i++){
    var parent=allP[i].parentNode;
    if(parent.nodeName=="DIV" && parent.title=="counter")
        result2[parent.id]=allP[i].innerHTML;
}
console.log(result2);

编辑:

我不明白你为什么使用

counters['counter' + this.id]=(...) // why adding 'counter'?

它将“计数器”添加到数组内的 key 中，您也可以使用它

counters[this.id]=(...)

然后在您的 $.each '循环' 中，您传递 jQuery 对象而不是您提供的展示所需的 id 字符串。如果您(出于任何原因)继续将字符串“counter”添加到数组中的键中，则必须像这样转换循环:

$.each( counters, function( id, value ) {
    // you should name variables differently, maybe key and counter, or key and id, just avoid naming two different variales same
    var id = new countUp( id.substr(7), 0, value, 0, 2 );
    id.start();
});

所以也许这也可以工作并且可以更好地理解

$.each( counters, function( key, value ) {
      var objCounter = new countUp(key.substr(7), 0, value, 0, 2);
      objCounter.start();
      // which could be replaced by (new countUp(key.substr(7), 0, value, 0, 2)).start();
});