jquery数组返回一个undefined？

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

这是可变吊装的副产品。由于您使用的是+=运算符，因此字符串将附加到先前未定义的变量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);
};