javascript - 无法在两个容器中显示div内容

Question

我想将“test1”和“test2”数组中随机显示的值显示到两个不同的容器“mainone”和“maintwo”中。现在我可以从数组中获取随机值，但每次单击 click me 按钮时无法显示容器中的整个 html 内容；

我的 fiddle :

https://jsfiddle.net/scrumvisualize/yecoqusp/

Page with data on load

var teama = ["one_1", "one_2", "one_3","one_4", "one_5"];
var test1 = [];
var test2 = [];
function startTeam(){
    for(var i = teama.length - 1; i >= 0; i--){
        var randomIndex =Math.floor(Math.random()*teama.length);
        var rand = teama[randomIndex];
        teama.splice(randomIndex, 1);
        if(i%2){
            test1.push(rand);
        }else{
            test2.push(rand);
        }
    }
    alert(test1);
    alert(test2);

    for(var j=0; j<test1.length; j++){
        $('#mainone').html('<div id="' + test1[j] + '" class="well">' + test1[j] + '</div>');
    }

    for(var k=0; k<test2.length; k++){
        $('#maintwo').html('<div id="' + test2[k] + '" <div class="well"></div>' + test2[k] + '</div>');
    }
}

Answer 1

我尝试使用你的 fiddle ，但没有成功，作为猜测，你有这个

for(var j=0; j<test1.length; j++){
    $('#mainone').html('<div id="' + test1[j] + '" class="well">' + test1[j] + '</div>');
}
for(var k=0; k<test2.length; k++){
    $('#maintwo').html('<div id="' + test2[k] + '" <div class="well"></div>' + test2[k] + '</div>');
}

两个for循环中的每个循环都会覆盖相应div的html， 相反，在 for 循环之外创建两个变量，例如 main1html 和 main2html，for 循环应该类似于:

for(var j=0; j<test1.length; j++){
    main1html += '<div id="' + test1[j] + '" class="well">' + test1[j] + '</div>');
}
for(var k=0; k<test2.length; k++){
    main2html += '<div id="' + test2[k] + '" <div class="well"></div>' + test2[k] + '</div>';
}

在两个 for 循环之后将最终的 html 分配给两个 div，如下所示:

$('#mainone').html(main1html);
$('#maintwo').html(main2html);