Javascript 如何基于变量追加类

我正在尝试构建一个棋盘，这段代码就是这么做的。但是，我不知道如何将行和列（例如a1、g3…）作为一个类添加到每个单独的空间中。我想在for循环中使用j变量来表示数字，然后像column[counter]这样的东西来添加行。大概是这样的；class=“列[计数器]+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 ++
  }
});

$（函数（）{
变量计数器=0，
变量列=['a'、'b'、'c'、'd'、'e'、'f'、'g'、'h']
对于（i=0；i而言，这是实现您所追求目标的最佳方式：

$(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>");
});

$（函数（）{
变量列=['a'、'b'、'c'、'd'、'e'、'f'、'g'、'h']；
var$chessboard=$（'.chessboard'）；
对于（i=0；i而言，这是实现您所追求目标的最佳方式：

$(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>");
});

$（函数（）{
变量列=['a'、'b'、'c'、'd'、'e'、'f'、'g'、'h']；
var$chessboard=$（'.chessboard'）；
对于（i=0；i我对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);
        }
    } 
});

$（函数（）{
变量列=['a'、'b'、'c'、'd'、'e'、'f'、'g'、'h']；
对于（var i=0；i<8；i++）{
对于（var j=0；j<8；j++）{
变量tile=$（“”）；
//添加偶数或奇数类
addClass（i%2==0？'偶数'：'奇数'）；
//添加平铺类的名称
addClass（列[i]+（j+1））；
$（'.chessboard'）。附加（平铺）；
}
} 
});
我对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);
        }
    } 
});

$（函数（）{
变量列=['a'、'b'、'c'、'd'、'e'、'f'、'g'、'h']；
对于（var i=0；i<8；i++）{
对于（var j=0；j<8；j++）{
变量tile=$（“”）；
//添加偶数或奇数类
addClass（i%2==0？'偶数'：'奇数'）；
//添加平铺类的名称
addClass（列[i]+（j+1））；
$（'.chessboard'）。附加（平铺）；
}
} 
});
你用这些类做什么？完全有可能，基于CSS3选择器，你实际上不需要添加类，而可以使用类似
div.space:偶数的选择器。看看。最终，我将不得不针对每个单独的空间进行游戏逻辑，我将奇数和偶数类用于交替颜色。有吗我在append（）中添加代码的时间它返回一个字符串。我正在尝试根据j变量和计数器动态更改类，以生成类：a1、a5、g4等…在使用append时这可能吗？您使用这些类的目的是什么？完全可能的是，基于CSS3选择器，您实际上不需要添加类，而可以使用select或者像
div.space:even
。看一看。最终，我必须针对每个单独的空间进行游戏逻辑，我使用奇数和偶数类进行交替颜色。任何时候我在append（）中添加代码它返回一个字符串。我正在尝试根据j变量和计数器动态更改类，以生成类：a1、a5、g4等…使用append时这可能吗？我喜欢这种改进的方法，从将意大利面连接到
addClass
，真的很喜欢重构代码，我仍在学习这样做我没有想到。我喜欢所有的逻辑在其附加之前发生的方式。更容易阅读。非常感谢！@AnthonyD：对于一个性能优化且易于设计的解决方案，我推荐我的第二个解决方案@（另请参见演示）。我喜欢将意大利面连接成
addClass
的改进方法。我真的很喜欢重构代码，我还在学习。我喜欢这样做，就像我没有想到的那样。我喜欢所有逻辑在附加之前发生的方式。更容易阅读。非常感谢！@AnthonyD:对于一个性能优化且易于风格化的解决方案，我推荐我的第二个解决方案@（另请参见演示）。感谢您的快速响应，非常感谢。我选择IrkenIvaders答案是因为我发现它更易于阅读。再次感谢！@AnthonyD IrkenIvader的答案可能更具可读性，但我的答案针对性能进行了优化，并且HTML输出更易于使用CSS进行样式设置（请参见）。此外，还有另一个答案，它可以生成更可读的HTML代码。感谢您的快速响应，非常感谢。我选择IrkenIvaders答案是因为我发现它更易于阅读。再次感谢！@AnthonyD IrkenIvader的答案可能更可读，但我的答案针对性能进行了优化，并且HTML输出更易于使用CSS进行样式设置（请参阅）。此外，还有另一个答案，它生成更可读的HTML代码。
$(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);
        }
    } 
});