Question

我正在使用jQuery生成tile的网格，现在我想给它们我想从数组中获取的属性以及稍后从服务器获取的属性。如果不为任何瓷砖提供ID，最好这样做。任何想法如何做到这一点？

function createGrid() {
    myGrid = $('<tileBox>');
    var rows = 1;
    var cols = 10;
    for (var i = 0; i < rows; i++) {
        var row = $('<tr>').appendTo(myGrid);
        for (var j = 0; j < cols; j++) {
            $('<tile>').appendTo(row);
        }
    }
    myGrid.appendTo("#container");
}

tile{
  /* width: 50px;
  height: 50px; */
  padding: 50px;
  margin: 15;
  border: 1px solid;
  background-color: red;  
}

<html>

<head>
    <link rel="stylesheet" type="text/css" href="MetroUI.css">
    <script type="text/javascript" src="jquery.js"></script>
    <script type="text/javascript" src="MetroUI.js"></script>
    <script>
        window.addEventListener('load', createGrid); 
    </script>
</head>

<body>
    <div id="container"></div>
</body>

</html>

Answer 1

确定。因此，如果您在示例中将网格设置为1行10列，那么您只需将属性存储在数组标记0中，即网格1.因此，在数据（或服务器数据）数组中，您需要10个对象。如果网格是4x4 16个对象。

var grid=[{name:"grid1"},{name:"grid2"},{name:"grid3"},{name:"grid4"}];

我使用了我的属性名称，它可以是任何东西，我的网格名为grid1，grid2不是id＆＃39; s它们只是值，它们可以是a，b，c，d ......

您现在所做的就是在绘制网格时添加属性;

为了简单起见，我使用了您的代码：

// i use a marker to step through my array of data!
var gridMarker=0;

for (var i = 0; i < rows; i++) {
    var row = $('<tr>').appendTo(myGrid);
    for (var j = 0; j < cols; j++) {
      // replace the hash on your tile to add my array.name data  
      $('<tile data-name="#">'.replace("#",grid[marker].name).appendTo(row);
      // increment my marker;  
      marker++;
    }
}

如果你使用了客户端模板引擎，你可以加快速度并改善整个事情。如果您使用谷歌jquery模板或只是javascript模板，您会发现其中的一些，文档是自我解释的。

从服务器生成具有切片属性的网格

1 个答案: