jquery - 带有两个嵌套 flexbox 的动态磨碎网格不起作用？

Question

我正在创建一个带有嵌套 flexbox div 的网格。我的带有两个 for 循环的代码不起作用。

每当我尝试在没有字符串变量的情况下分配 id 时，它都可以工作，但如果我使用变量来分配 id 属性，它就不会。你能帮我找出我可能做错了什么吗？

$('#gameareaGrid').append('<div class="gridContainer" id="gridId">' + '</div>');

for (i = 0; i < 10; i++) {
  let rowId = "row" + i;
  $('#gridId').append('<div class="rowContainer" id="+rowId+">' + '</div>');

  for (j = 0; j < nb_cols; j++) {
    $('"#"+rowId').append('<div class="cell" id=rowId+j>' + '</div>');
  }
}

Answer 1

您需要正确组织单引号/双引号，以免在连接值时破坏字符串的定界:

$('#gameareaGrid').append('<div class="gridContainer" id="gridId"></div>');

for (i = 0; i < 10; i++) {
  let rowId = "row" + i;
  $('#gridId').append('<div class="rowContainer" id="' + rowId + '"></div>');

  for (j = 0; j < nb_cols; j++) {
    $('#' + rowId).append('<div class="cell" id="' + (rowId + j) + '"></div>');
  }
}

我建议使用带有语法突出显示的编辑器，因为它可以更轻松地管理它。

另请注意，动态生成具有唯一/增量 id 属性的元素是一种反模式。我建议使用公共(public)类，然后在需要处理的事件发生时通过 DOM 遍历关联内容。