试图使一个可重复使用的功能，使细胞连续。 （棋盘） [英] Trying to make a reusable function to make cells in a row. (chess board)

问题描述

我试图做一个棋盘的第一排。我有它，但我试图让我认为什么是所谓的构造函数学习更高级的编程。我试图获取函数中的所有数据，并将div附加到棋盘上，通过乘以 i *棋子大小来更新x。我想我是在使用新关键词时遇到问题并附加在一起。如果你能告诉我你将如何填补整个棋盘，这将是伟大的。我假设你会使用嵌套for循环。这是我的下一个目标。

$ $ $（function（） {
var boardHeight = parseInt（$（。board）.css（height）），
boardWidth = parseInt（$（。board）.css（width））
amountOfPieces = 8，
pieceSize = boardHeight / amountOfPieces，
board = $（。board）;
console.log（pieceSize）;
函数Cell橙，x）{
this.width = pieceSize;
this.height = pieceSize;
this.color = orange？orange：black
this.x = （$ i

console.log（new Cell（））
0）{
board.append（$（< div>）new cell（orange，i * pieceSize））
} else if（i％2 == 1）{
board.append（$（< div>）.css（{
position：absolute，
width：pieceSize，
height：pieceSize，
背景合作lor：black，
left：i * pieceSize
}））
}
}
}）;

编辑：好的我有我的答案中显示的第一行。现在我需要填写整个董事会。记住颜色需要交替，我宁愿使用嵌套for循环。谢谢。

解决方案使用 .slice（）， .filter（），：odd ，：even ， .addBack（）， Array.prototype.reverse（）

 （var i = n = 0，colors = [orange，black]; i <64; i ++，n = i％8 + 1）{$（< div class =行> 中）appendTo（ 部分）; if（n === 8）{$（。row）。slice（i === n  -  1？0：$（。row）.length  -  n，i + 1）.filter（甚至）。css（background，colors [0]）.addBack（）。filter（：odd）。css（background，colors [1]）; colors.reverse（）; $（ 部分）附加（ <峰; br> 中）; }}  

div {position：relative;宽度：65px;身高：65px;显示：内联块;填充：0; margin-left：2px; margin-right：2px; outline：2px solid brown;} < script src = https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js >< /脚本><节>< /节>

I'm trying to make the first row of a chess board. I had it but Im trying to make what I think what's called a constructor function to learn more advanced programming. I'm trying to get all the data in the function and append the div to the board the x should be updated by multiplying i * the piece size.I think I'm having problems using the new key word and appending together. If you could show me how you would fill up the whole chess board that would be great. I'm assuming you would use nested for loops. That's my next goal.

I have something like this.

$(function(){
    var boardHeight = parseInt($(".board").css("height")),
    boardWidth = parseInt($(".board").css("width")),
    amountOfPieces =8,
    pieceSize = boardHeight / amountOfPieces,
    board = $(".board");
    console.log(pieceSize);
    function Cell(orange, x){
        this.width = pieceSize;
        this.height = pieceSize;
        this.color =  orange ?  "orange" : "black"
        this.x = x;
    }
    console.log( new Cell())
    for(var i = 0 ; i < amountOfPieces; i++){
        if(i % 2 == 0){
            board.append($("<div>") new cell("orange", i * pieceSize))
        }else if( i % 2 == 1){
            board.append($("<div>").css({
                position: "absolute",
                width : pieceSize,
                height: pieceSize,
                "background-color" : "black", 
                left: i * pieceSize
            }))
        }
    }
});

EDIT: ok guys I got the first row shown in my answer. now I need to fill in the whole board. Remember the colors need to alternate and I would prefer to use a nested for loop. Thanks.

解决方案

Try using .slice(), .filter(), :odd, :even, .addBack(), Array.prototype.reverse()

for (var i = n = 0, colors = ["orange", "black"]; i < 64; i++, n = i % 8 + 1) {
  $("<div class=row>").appendTo("section");
  if (n === 8) {
    $(".row").slice(i === n - 1 ? 0 : $(".row").length - n, i + 1)
    .filter(":even").css("background", colors[0])
    .addBack().filter(":odd").css("background", colors[1]);
    colors.reverse(); $("section").append("<br>");
  }
}

div {
  position: relative;
  width: 65px;
  height: 65px;
  display: inline-block;
  padding: 0;
  margin-left: 2px;
  margin-right: 2px;
  outline: 2px solid brown;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js">
</script>
<section>
</section>

这篇关于试图使一个可重复使用的功能，使细胞连续。 （棋盘）的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！