如何只允許每列有一定數量的點擊事件？還有每頁？僅使用香草JavaScript

使用 vanilla JavaScript 進行連接 4。使用事件偵聽器“單擊”將彩色磁盤插入列中。磁盤無限堆疊。我需要它在 6 點后停止。然后總共 42 個。我把它分成7列。每個都有自己的“點擊”事件處理程式。如何讓它將每次點擊插入到陣列中？ https://youtu.be/Jqm5m75pq6A 這是我所擁有的一個例子

let gameBoard = [
    [null, null, null, null, null, null, null],
    [null, null, null, null, null, null, null],
    [null, null, null, null, null, null, null],
    [null, null, null, null, null, null, null],
    [null, null, null, null, null, null, null],
    [null, null, null, null, null, null, null],
];


let column0 = document.querySelector("#column0");
let column1 = document.querySelector("#column1");
let column2 = document.querySelector("#column2");
let column3 = document.querySelector("#column3");
let column4 = document.querySelector("#column4");
let column5 = document.querySelector("#column5");
let column6 = document.querySelector("#column6");
column0.addEventListener("click", function () {
    // console.log("column 1");
    if (currentPlayer === 1) {
        // column1.innerHTML =
        let black = document.createElement("span");
        black.className = "blackDisc";
        column0.append(black);
        currentPlayer  = 1;
        console.log("Current player:"   currentPlayer);
        discCount  ;
        gameBoard[5][0] = 1;
        console.log(currentPlayer);
    } else if (currentPlayer === 2) {
        let red = document.createElement("span");
        red.className = "redDisc";
        column0.append(red);
        currentPlayer -= 1;
        console.log("current player:"   currentPlayer);
        discCount  = 1;
        gameBoard[5][0] = 2;
    }
});

uj5u.com熱心網友回復：

您可以只計算列中有多少子元素。

let column0 = document.querySelector("#column0");
column0.addEventListener("click", function () {
    if ( column0.querySelectorAll( 'span' ).length < 7 ) {
        // do game logic here only if there aren't 6 spans in the column

如果您參考外部容器來執行操作，則可以對整個板上的所有跨度執行類似操作querySelectorAll()。

另一種選擇是將資料存盤在gameBoard陣列中并檢查值。這種方式可能會更快，但更復雜一些。

uj5u.com熱心網友回復：

只需從空陣列開始，因此您不必在每次單擊時迭代它們并計算單擊列陣列中已有多少項：

let currentPlayer = 1;
//starting with empty arrays;
let gameBoard = [[],[],[],[],[],[],[]];

for(let i = 0; i < 7; i  )
{
  const column = document.getElementById("column"   i);
  column.addEventListener("click", function(e)
  {
    //check if current column has 7 items
    if (gameBoard[i].length > 6)
      return;
    
    //add item to the column
    gameBoard[i].push(currentPlayer);
    const span = document.createElement("span");
    span.className = (currentPlayer == 1 ? "black" : "red")   "Disc";
    column.appendChild(span);
    currentPlayer = !--currentPlayer   1;
    console.log("Current player:"   currentPlayer);
    console.log("gameBoard", gameBoard);
  });
}

.content
{
  display: flex;
}

.content > *
{
  width: 2.3em;
  height: calc(2.2em * 7   0.1em);
  outline: 1px solid black;
  background-color: white;
}

.blackDisc,
.redDisc
{
  width: 2em;
  height: 2em;
  border-radius: 100%;
  display: inline-block;
  vertical-align: top;
  margin: 0.1em;
}

.blackDisc
{
  background-color: black;
}

.redDisc
{
  background-color: red;
}

<div class="content">
  <div id="column0"></div>
  <div id="column1"></div>
  <div id="column2"></div>
  <div id="column3"></div>
  <div id="column4"></div>
  <div id="column5"></div>
  <div id="column6"></div>
</div>

標籤：javascript 循环 条件语句

上一篇：while回圈是否存盤中間結果？

下一篇：SSL連接證書問題與RestAssured