第七色在线视频,2021少妇久久久久久久久久,亚洲欧洲精品成人久久av18,亚洲国产精品特色大片观看完整版,孙宇晨将参加特朗普的晚宴

為了賬號安全,請及時(shí)綁定郵箱和手機(jī)立即綁定
已解決430363個(gè)問題,去搜搜看,總會(huì)有你想問的

如何用 HTML 代碼表示這個(gè)矩陣?

如何用 HTML 代碼表示這個(gè)矩陣?

素胚勾勒不出你 2023-08-05 21:14:31
我有 2d Matrix(鏡像),它按我的預(yù)期工作。但是,我不知道如何正確編寫 JavaScript 代碼,因此它不會(huì)創(chuàng)建額外的 div 元素。在矩陣中,我有 (x,y) 索引,因此它改變了正確的位置。然而,當(dāng)需要在屏幕上渲染它時(shí),它會(huì)附加(添加) new 。createBoard() {    let specialSquares = {      '3xW': [0, 7, 105],      '3xL': [20, 76, 80],      '2xW': [16, 32, 48, 64],      '2xL': [3, 36, 45, 52, 92, 96, 108],      'CT': [112]    };    this.board = [...new Array(15)].map(x => new Array(15));    let boardSide = 14;    for (let i = 0; i <= boardSide / 2; i++) {      for (let j = 0; j <= boardSide / 2; j++) {        let num = indexOfTile(i, j)        for (let ss in specialSquares) {          let idx = specialSquares[ss].indexOf(num)          if (idx >= 0) {            this.board[i][j] = ss;            break;          }else            this.board[i][j] = "_";        }}}渲染部分是這樣的,基本是一樣的:let specialSquares = {      '3xW': [0, 7, 105],      '3xL': [20, 76, 80],      '2xW': [16, 32, 48, 64],      '2xL': [3, 36, 45, 52, 92, 96, 108],      'CS': [112]    };    let boardSide = 14;    $('.board').remove();    let $board = $('<div class="board"/>').appendTo('body');    for (let i = 0; i <= boardSide / 2; i++) {      for (let j = 0; j <= boardSide / 2; j++) {        let num = indexOfTile(i, j)        for (let ss in specialSquares) {          let idx = specialSquares[ss].indexOf(num)          if (idx >= 0) {            $board.append('<div/>' + ss)            break;          }          else {            $board.append('<div /> ')          }但每次(idx<0)它都會(huì)追加一個(gè)新的 div。這不會(huì)發(fā)生在控制臺(tái)上的數(shù)組中,因?yàn)槲矣写_切的位置 (i,j)。
查看完整描述

2 回答

?
ABOUTYOU

TA貢獻(xiàn)1812條經(jīng)驗(yàn) 獲得超5個(gè)贊

我會(huì)創(chuàng)建一個(gè)空板并且不再重新創(chuàng)建它。只需為每個(gè)圖塊提供特定的類或 ID 及其坐標(biāo),例如<div id='tile-0-7', class='tile'></div>. 然后,不必刪除并重新創(chuàng)建整個(gè)板,只需清空內(nèi)容并使用以下內(nèi)容填充必要的內(nèi)容即可:


let specialSquares = {

  '3xW': [0, 7, 105],

  '3xL': [20, 76, 80],

  '2xW': [16, 32, 48, 64],

  '2xL': [3, 36, 45, 52, 92, 96, 108],

  'CS': [112],

};

let boardSide = 15;


$('.tile').html('_');

Object.keys(specialSquares).forEach(squareName => {

  let tiles = specialSquares[squareName];

  tiles.forEach(tile => {

    let x = Math.floor(tile / boardSide);

    let y = tile % boardSide;

    $(`#tile-${x}-${y}`).html(squareName);

  })

})


要?jiǎng)?chuàng)建矩陣,我會(huì)這樣:


function createBoard() {

  let specialSquares = {

    '3xW': [0, 7, 105],

    '3xL': [20, 76, 80],

    '2xW': [16, 32, 48, 64],

    '2xL': [3, 36, 45, 52, 92, 96, 108],

    'CT': [112],

  };

  let boardSide = 15;

  this.board = Array(boardSide).fill(0).map(() => Array(boardSide).fill('_'));

  Object.keys(specialSquares).forEach(squareName => {

    let tiles = specialSquares[squareName];

    tiles.forEach(tile => {

      let x = Math.floor(tile / boardSide);

      let y = tile % boardSide;

      this.board[x][y] = squareName;

    });

  })

}


查看完整回答
反對 回復(fù) 2023-08-05
?
慕容708150

TA貢獻(xiàn)1831條經(jīng)驗(yàn) 獲得超4個(gè)贊

我采取了一些自由措施并重新排列了您的內(nèi)容specialSquares,以便更輕松地從循環(huán)中進(jìn)行訪問??纯催@個(gè):


let buildBoard = () => {

   let height = 14;

   let width = 14;

   let board_container = $("#board_container");

   let counter = 0;

   for (let i=0; i < height; i++) {

      if ($(board_container).html()) {

         $(board_container).html($(board_container).html()+"<br>");

      }

      for (let j = 0; j < width; j++) {

         //console.log(i, j);

         let boardValue = specialSquares[counter];

         if (boardValue) {

             $(board_container).append(`<div id='cell_${counter}' class='non_blank'>${boardValue}</div>`);

         } else {

           $(board_container).append(`<div id='cell_${counter}'>${counter}</div>`);

         }

         counter++;

      }

   }


}


let specialSquares = {

   0: '3xW',7: '3xW',105: '3xW',

   20: '3xL',76: '3xL',80: '3xL',

   16: '2xW',32: '2xW',48: '2xW',64: '2xW',

   3: '2xL', 36: '2xL', 45: '2xL', 52: '2xL', 92: '2xL', 96: '2xL', 108: '2xL',

   112: 'CS'

}


buildBoard();

這里有一個(gè) JSFiddle:https ://jsfiddle.net/dbrc12vt/3/

您沒有提供 CSS,因此格式不太漂亮。但只要您認(rèn)為合適,就可以插入您自己的。


另請注意,每個(gè)單元格都有一個(gè)與其索引相對應(yīng)的 ID,例如cell_112。您現(xiàn)在可以將它們用作后續(xù)選擇器操作的參考。


查看完整回答
反對 回復(fù) 2023-08-05
  • 2 回答
  • 0 關(guān)注
  • 160 瀏覽
慕課專欄
更多

添加回答

舉報(bào)

0/150
提交
取消
微信客服

購課補(bǔ)貼
聯(lián)系客服咨詢優(yōu)惠詳情

幫助反饋 APP下載

慕課網(wǎng)APP
您的移動(dòng)學(xué)習(xí)伙伴

公眾號

掃描二維碼
關(guān)注慕課網(wǎng)微信公眾號