填写5个随机包含20个方框的表格

Question

我有一个有20个盒子的桌子，我必须通过点击一个按钮为它们中的5个着色，问题是我必须随机地给5个盒子着色而不是整个桌子。 你能帮我吗

    $(bluecolor);
    function bluecolor() {
        $(".boutton2").click(function () {
            $("div>div>div").each(function () {
                $(this).addClass("blue");

            });
        });
    }

Answer 1

您可以获得5个随机数，这些数字从1到20中选择，因此使用ID更改单元格/ div的背景颜色。

例如：

for(i=0; i<5, i++){
    var rn = Math.floor(Math.random() * 20) + 1;
    $('#'+ rn).css({"background-color":"blue"});
}

Answer 2

我认为这里最好的方法是将其分解以显示随机数的创建，并将该类随机添加到一组div中的某个div中。我使用课程boxthing来演示＆＃34;组＆＃34;我用一个简单的递归函数来做到这一点。

只需单击按钮即可为新组随机着色。

修改以说明＆＃34;第一，第二，第三＆＃34;颜色和静电＆＃34;布局。

＆＃13;

＆＃13;

var maxNumber = 20;

function createDivs(num) {
  for (var i = 0; i < num; i++) {
    $('#mytablething').append('<div class="boxthing">' + i + '</div>');
  }
}
// commented out on revision 
// createDivs(maxNumber);

// Returns a random integer between min (included) and max (excluded)
function getRandomInt(min, max) {
  return Math.floor(Math.random() * (max - min)) + min;
}
// add blue to some random N number of divs
function doBlue(n) {
  if ($('.boxthing.first-color').length < n) {
    var boxnumber = getRandomInt(0, maxNumber);
    $("div.boxthing").eq(boxnumber).addClass("first-color");
    doBlue(n);
  }
  return "done";
}
$("#mybutton").on('click',function() {
  //clear existing classes
  $('.boxthing').removeClass('first-color second-color third-color');
  doBlue(5);
});
$("#mytablething").on('click','.first-color',function() {
  //clear existing
  $(this).removeClass('first-color').addClass('second-color');
});
$("#mytablething").on('click','.second-color',function() {
  //clear existing
  $(this).removeClass('second-color').addClass('third-color');
});

＆＃13;

#mytablething div.row{border:solid red 1px; height: 1em; width:6em;}
#mytablething div.boxthing {
  border: solid cyan 1px;
  width: 1em;
  height: 1em;
  display:inline-block;
}

.first-color {
  background-color: blue;
}
.second-color {
  background-color: green;
}
.third-color {
  background-color: orange;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<button id="mybutton">Start</button>
<div id="mytablething">
    <div class="row"><div class='boxthing'></div><div class='boxthing'></div><div class='boxthing'></div><div class='boxthing'></div></div>
    <div class="row"><div class='boxthing'></div><div class='boxthing'></div><div class='boxthing'></div><div class='boxthing'></div></div>
    <div class="row"><div class='boxthing'></div><div class='boxthing'></div><div class='boxthing'></div><div class='boxthing'></div></div>
    <div class="row"><div class='boxthing'></div><div class='boxthing'></div><div class='boxthing'></div><div class='boxthing'></div></div>
    <div class="row"><div class='boxthing'></div><div class='boxthing'></div><div class='boxthing'></div><div class='boxthing'></div></div>
</div>

＆＃13;

＆＃13;

＆＃13;