jquery 数组返回一个未定义的？

Question

我试图从这个 html 代码中获取一个数组，以将框(其 id 中包含数字)添加到我的内容中:

<a href="#" data-box="38,39,40">An Array</a>

要添加的框:

<div id="box38">
    ...
</div>
<div id="box39">
    ...
</div>
<div id="box40">
    ...
</div>

因为还有这样的 html 行:

<a href="#" data-box="24">No Array</a>

我还需要一些东西来检测是否有多个值或只有一个值。在本例中，我只使用了 if (theid.length > 2) 因为单个值不会超过两个字符。

数组应该是[38,39,49]，而且确实如此，因为console.log(theid);返回的是这个数组。

var theid = $(this).data('box');
var newHTML = '';

if (theid.length > 2) {
    theid = theid.split(',');
    $.each(theid, function(idx) {
        newHTML += $('#box' + theid[idx]).html();
    });
} else {
    var newHTML = '';
    newHTML = $('#box' + theid).html();
    console.log(theid);
};

但是如果我随后将 newHTML 添加到现有内容 content.html(newHTML); 加载的框前面总是有一个“未定义”？这是屏幕截图:

Answer 1

这是变量提升的副产品。由于您使用的是 += 运算符，因此该字符串将被附加到之前 undefined variable newHTML 的末尾。你可以这样看:

//hoisted
var newHTML = undefined;

var theid = $(this).data('box');

if (theid.length > 2) {
 theid = theid.split(',');
 $.each(theid, function(idx) {
    newHTML += $('#box' + theid[idx]).html();
 });
} else {
 /*var */newHTML = '';
 newHTML = $('#box' + theid).html();
 console.log(theid);
};