サーバからタイル属性を持つグリッドを生成する

私はjQueryでタイルのグリッドを生成しています。今は、それらの属性に配列から取得したい、そして後でサーバから取得したいとします。タイルの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>

出典

2017-11-14 Mikołaj Przenzak

jQueryの '.attr'を使うことができますが、特定の要素への参照が必要な場合は、idsが最適かもしれません。しかし、単にajaxによってフェッチされた配列を反復処理したい場合は、コンテナを見つけてそれをループして、要素を変更することができます。 – Neil

タイルのスタイルを変更するには（要素の変更について）意味がありますか？たとえば、配列に新しい色があり、元のタイルの色をこれに置き換えたいとします。 –

jQueryで '.style'や' .attr'や '.addClass'を使います。 – Neil

[OK]をクリックします。したがって、例でグリッドを1行10列にすると、グリッド1である配列マーカー0に属性を格納するだけです。したがって、データ（またはサーバーデータ）の配列には10個のオブジェクトが必要です。グリッドが4x4 16オブジェクトの場合私はそれが何かは、私のグリッドはGRID1命名されている可能性があり、私の属性の名前を使用してい

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

、grid2は...彼らは、B、C、Dかもしれない値だけされているIDがありません

グリッドを描画するときに属性を追加するだけです。

私は簡単にするためにあなたのコードを使用しています：

// 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++; 
    } 
}

あなたはクライアント側のテンプレートエンジンを使用する場合は、物事をスピードアップし、全体を向上させることができます。あなたはGoogleのjqueryのテンプレートまたはちょうどjavascriptのテンプレートを見つける場合は、それらの数は、ドキュメントは自明です。

出典

2017-11-14 22:50:11 MartinWebb

このようなものを使用できないのはなぜですか？私は単に私のコードを追加して、今はうまくいくと思います。 'code'function createGrid（）{ myGrid = $（ ''）; var rows = 1; var cols = 4; {name： "grid1"}、{name： "grid2"}、{name： "grid3"}、{name： "grid4"}]; var grid = {{ var gridMarker = 0; for（var i = 0; i <行; i ++）{ var row = $（ ''）.appendTo（myGrid）;for（var j = 0; j '。replace（ "＃"、grid [marker] .name）.appendTo（row） ; marker ++; } } –

サーバからタイル属性を持つグリッドを生成する

答えて

関連する問題