Question

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

我的小提琴：

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

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

我试图在你的小提琴上工作，但没有用，作为猜测，你有这个

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);

Answer 2

好的，正如其他地方所提到的，使用.html（）只是每次都覆盖数据。但是，您的代码中存在一些问题。

您没有在第二个循环中正确关闭div。
您需要将新数据附加到容器中（如果需要，请先清除容器，我在我的示例中这样做。）

Fiddle

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);
  // i'm emptying the containers, you may not need to depending
  // on your implementation
  $('#mainone').empty();
  $('#maintwo').empty();
  for(var j=0; j < test1.length; j++){
      // use append here, not html
      $('#mainone').append('<div id="' + test1[j] + '" class="well">' + test1[j] + '</div>');
  }

  for(var k=0; k<test2.length; k++){
      // use append here, not html
      // i also fix your markup ( you were not closing the div properly)
      $('#maintwo').append('<div id="' + test2[k] + '" class="well">' + test2[k] + '</div>');
  }

}

无法在两个容器

2 个答案: