Question

我正在尝试构建一个棋盘，这个代码就是这样做的。但是，我不知道如何将行和列（例如a1，g3 ......）作为类添加到每个单独的空间。我想在for循环中使用j变量来表示数字，然后像column [counter]这样添加行。大致是这样的; class =“column [counter] + j”。我知道这种语法不起作用，所以我想知道，有没有办法以我正在尝试的方式做到这一点？谢谢，任何帮助表示赞赏。

 $(function(){
  var counter = 0,
  var column = ['a','b','c','d','e','f','g','h']
  for(i=0;i<8;i++) {
    if (i%2==0) {
      for (j=0;j<8;j++) {
        $('.chessboard').append("<div class='space even'></div>");

      }
    } else {
      for (j=0;j<8;j++) {
        $('.chessboard').append("<div class='space odd'></div>");
      }
    counter ++
  }
});

Answer 1

我稍微清理了一下javascript，为你提供了一个很好的基础。利用jQuery添加类而不是追加字符串是保持简单的好方法。

$(function(){  
    var column = ['a','b','c','d','e','f','g','h'];
    for(var i = 0; i < 8; i++) {    
        for (var j = 0; j < 8; j++) {
            var tile = $("<div class='space'></div>");

            //add even or odd class
            tile.addClass( i % 2 === 0 ? 'even' : 'odd' );          

            //add name of tile class
            tile.addClass(column[i] + (j + 1));

            $('.chessboard').append(tile);
        }
    } 
});

Answer 2

这是实现您所寻找目标的最佳方式：

$(function(){
    var column = ['a','b','c','d','e','f','g','h'];
    var $chessboard = $('.chessboard');
    for(i=0;i<8;i++)
        for (j=0;j<8;j++)
            $chessboard.append("<div class='" +
                               column[i] + "-" + j +
                               (j%2===0 ? " evencol" : " oddcol") +
                               (i%2===0 ? " evenrow" : " oddrow") +
                               "'></div>");
});

它生成以下HTML：

<div class="a-0 evencol evenrow"></div>
<div class="a-1 oddcol evenrow"></div>
<div class="a-2 evencol evenrow"></div>
<div class="a-3 oddcol evenrow"></div>
<div class="a-4 evencol evenrow"></div>
<div class="a-5 oddcol evenrow"></div>
<div class="a-6 evencol evenrow"></div>
<div class="a-7 oddcol evenrow"></div>
<div class="b-0 evencol oddrow"></div>
<div class="b-1 oddcol oddrow"></div>
<div class="b-2 evencol oddrow"></div>
<div class="b-3 oddcol oddrow"></div>
<div class="b-4 evencol oddrow"></div>
<div class="b-5 oddcol oddrow"></div>
<div class="b-6 evencol oddrow"></div>
<div class="b-7 oddcol oddrow"></div>
<div class="c-0 evencol evenrow"></div>
<div class="c-1 oddcol evenrow"></div>
<div class="c-2 evencol evenrow"></div>
<div class="c-3 oddcol evenrow"></div>
<div class="c-4 evencol evenrow"></div>
<div class="c-5 oddcol evenrow"></div>
<div class="c-6 evencol evenrow"></div>
<div class="c-7 oddcol evenrow"></div>
<div class="d-0 evencol oddrow"></div>
<div class="d-1 oddcol oddrow"></div>
<div class="d-2 evencol oddrow"></div>
<div class="d-3 oddcol oddrow"></div>
<div class="d-4 evencol oddrow"></div>
<div class="d-5 oddcol oddrow"></div>
<div class="d-6 evencol oddrow"></div>
<div class="d-7 oddcol oddrow"></div>
<div class="e-0 evencol evenrow"></div>
<div class="e-1 oddcol evenrow"></div>
<div class="e-2 evencol evenrow"></div>
<div class="e-3 oddcol evenrow"></div>
<div class="e-4 evencol evenrow"></div>
<div class="e-5 oddcol evenrow"></div>
<div class="e-6 evencol evenrow"></div>
<div class="e-7 oddcol evenrow"></div>
<div class="f-0 evencol oddrow"></div>
<div class="f-1 oddcol oddrow"></div>
<div class="f-2 evencol oddrow"></div>
<div class="f-3 oddcol oddrow"></div>
<div class="f-4 evencol oddrow"></div>
<div class="f-5 oddcol oddrow"></div>
<div class="f-6 evencol oddrow"></div>
<div class="f-7 oddcol oddrow"></div>
<div class="g-0 evencol evenrow"></div>
<div class="g-1 oddcol evenrow"></div>
<div class="g-2 evencol evenrow"></div>
<div class="g-3 oddcol evenrow"></div>
<div class="g-4 evencol evenrow"></div>
<div class="g-5 oddcol evenrow"></div>
<div class="g-6 evencol evenrow"></div>
<div class="g-7 oddcol evenrow"></div>
<div class="h-0 evencol oddrow"></div>
<div class="h-1 oddcol oddrow"></div>
<div class="h-2 evencol oddrow"></div>
<div class="h-3 oddcol oddrow"></div>
<div class="h-4 evencol oddrow"></div>
<div class="h-5 oddcol oddrow"></div>
<div class="h-6 evencol oddrow"></div>
<div class="h-7 oddcol oddrow"></div>

现在，只需添加几行CSS，结果应如下所示：

请参阅this Fiddle了解演示。

替代实施：

另一种方法是：

$(function(){
    var column = ['a','b','c','d','e','f','g','h'];
    var currentRow;
    var $chessboard = $('.chessboard');
    for(i=0;i<8;i++) {
        currentRow = $("<div class='" + (i%2===0 ? " even" : " odd") + "'></div>").appendTo($chessboard);
        for (j=0;j<8;j++) {
            currentRow.append("<div class='" + column[i] + "-" + j + (j%2===0 ? " even" : " odd") + "'></div>");
        }
    }
});

它生成以下HTML：

<div class="even">
    <div class="a-0 even"></div>
    <div class="a-1 odd"></div>
    <div class="a-2 even"></div>
    <div class="a-3 odd"></div>
    <div class="a-4 even"></div>
    <div class="a-5 odd"></div>
    <div class="a-6 even"></div>
    <div class="a-7 odd"></div>
</div>
<div class="odd">
    <div class="b-0 even"></div>
    <div class="b-1 odd"></div>
    <div class="b-2 even"></div>
    <div class="b-3 odd"></div>
    <div class="b-4 even"></div>
    <div class="b-5 odd"></div>
    <div class="b-6 even"></div>
    <div class="b-7 odd"></div>
</div>
<div class="even">
    <div class="c-0 even"></div>
    <div class="c-1 odd"></div>
    <div class="c-2 even"></div>
    <div class="c-3 odd"></div>
    <div class="c-4 even"></div>
    <div class="c-5 odd"></div>
    <div class="c-6 even"></div>
    <div class="c-7 odd"></div>
</div>
<div class="odd">
    <div class="d-0 even"></div>
    <div class="d-1 odd"></div>
    <div class="d-2 even"></div>
    <div class="d-3 odd"></div>
    <div class="d-4 even"></div>
    <div class="d-5 odd"></div>
    <div class="d-6 even"></div>
    <div class="d-7 odd"></div>
</div>
<div class="even">
    <div class="e-0 even"></div>
    <div class="e-1 odd"></div>
    <div class="e-2 even"></div>
    <div class="e-3 odd"></div>
    <div class="e-4 even"></div>
    <div class="e-5 odd"></div>
    <div class="e-6 even"></div>
    <div class="e-7 odd"></div>
</div>
<div class="odd">
    <div class="f-0 even"></div>
    <div class="f-1 odd"></div>
    <div class="f-2 even"></div>
    <div class="f-3 odd"></div>
    <div class="f-4 even"></div>
    <div class="f-5 odd"></div>
    <div class="f-6 even"></div>
    <div class="f-7 odd"></div>
</div>
<div class="even">
    <div class="g-0 even"></div>
    <div class="g-1 odd"></div>
    <div class="g-2 even"></div>
    <div class="g-3 odd"></div>
    <div class="g-4 even"></div>
    <div class="g-5 odd"></div>
    <div class="g-6 even"></div>
    <div class="g-7 odd"></div>
</div>
<div class="odd">
    <div class="h-0 even"></div>
    <div class="h-1 odd"></div>
    <div class="h-2 even"></div>
    <div class="h-3 odd"></div>
    <div class="h-4 even"></div>
    <div class="h-5 odd"></div>
    <div class="h-6 even"></div>
    <div class="h-7 odd"></div>
</div>

您的CSS略有不同（与其他选项相比，您的结果也应如下所示：

请参阅this Fiddle了解演示。

如何根据变量

2 个答案: