我正在尝试制作国际象棋棋盘的第一排。我有它，但我试图做出我认为所谓的构造函数来学习更高级的编程。我正在尝试获取函数中的所有数据并将div附加到板上x应该通过乘以i *片段大小来更新。我认为我在使用新关键字时遇到问题并附加一起。如果你能告诉我你将如何填满整个棋盘会很棒。我假设您将使用嵌套for循环。这是我的下一个目标。
我有类似的东西。
$(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
}))
}
}
});
编辑：好的，我得到了答案中显示的第一行。现在我需要填写整个董事会。记住颜色需要交替，我宁愿使用嵌套的for循环。感谢。
答案 0 :(得分：0)
好的，我想出了这个答案。你觉得怎么样？
$(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.background = orange ? "orange" : "black"
this.left = x;
this.position = "absolute"
}
console.log( new Cell())
for(var i = 0 ; i < amountOfPieces; i++){
if(i % 2 == 0){
var obj = new Cell("orange", i * pieceSize)
console.log(obj)
board.append($("<div>").css(obj))
}else if( i % 2 == 1){
var obj = new Cell("",i * pieceSize )
board.append($("<div>").css(obj))
}
}
}) .board{
background: #ccc;
width: 500px;
height: 500px;
margin: 20px auto;
position: relative;
}
.cell{
position: absolute;
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.2/jquery.min.js"></script>
<div class="board"></div>
现在开始制作专栏。对那些家伙有什么帮助吗？
编辑：我想出了一个填满整个电路板的答案，它在下面。我仍然希望看到其他人的结果
$(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, y){
this.width = pieceSize;
this.height = pieceSize;
this.background = orange ? "orange" : "black"
this.left = x;
this.position = "absolute"
this.top = y
}
console.log( new Cell())
for(var i = 0; i < amountOfPieces ; i ++){
for(var j = 0 ; j < amountOfPieces; j++){
if(i % 2 == 0){
if(j % 2 == 1){
var obj = new Cell("orange", i * pieceSize , j * pieceSize)
console.log(obj)
board.append($("<div>").css(obj))
}else{
var obj = new Cell("", i * pieceSize , j * pieceSize)
console.log(obj)
board.append($("<div>").css(obj))
}
}else if( i % 2 == 1){
if(j % 2 == 1){
var obj = new Cell("", i * pieceSize , j * pieceSize)
board.append($("<div>").css(obj))
}else{
var obj = new Cell("orange", i * pieceSize , j * pieceSize)
board.append($("<div>").css(obj))
}
}
}
}
}).board{
background: #ccc;
width: 500px;
height: 500px;
margin: 20px auto;
position: relative;
}
.cell{
position: absolute;
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.2/jquery.min.js"></script>
<div class="board"></div>
答案 1 :(得分：0)
你应该将pieceSize作为参数传递，如：
function Cell(orange, x, size) {
this.width = size;
this.height = size;
this.color = orange ? "orange" : "black"
this.x = x; // What is x used for anyway?
}
然后当你使用它时，它看起来像（只是一个例子）：
var createdCell = new Cell(true, 0, pieceSize);
以下几行全部搞砸了多个级别：
board.append($("<div>") new cell("orange", i * pieceSize))
查看jQuery .append()文档，以便更好地了解如何使用它：http://api.jquery.com/append/
你的Cell构造函数所做的就是创建游戏板上一个空格参数的对象。它实际上并没有构建它。您需要创建一个函数来接收new Cell()生成的对象，并实际创建一个HTML字符串以供您附加到页面。类似的东西：
function create(cell) {
var str = '<div class="whatever" style="';
str+= 'height: ' + cell.height + ';';
str+= 'width: ' + cell.width + ';';
str+= 'background: ' + cell.color + ';';
'">';
str += '</div>';
return str;
}
然后你可以这样做：
board.append(create(new Cell(true, 0, pieceSize)))
这个答案不适合您复制/粘贴到项目中。这些示例为您提供解决此问题所需的工具。
答案 2 :(得分：0)
尝试使用.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>