我如何在jquery中獲取點擊的坐標？-有解無憂

我有一個 8x8 div 的 div。我想用jquery來練習。我怎樣才能得到我點擊了哪一行和哪一列的哪個div？我嘗試使用 event.pageX 和 event.pageY 但它指定了點擊的坐標，我想獲取行和列

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <link rel="stylesheet" href="style.css">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
    <script src="script.js"></script>
    <title></title>
</head>
<body>

    <div id="gameArea"></div>

</body>
</html>

我也有一個css檔案

body{
    margin: 0;
    padding: 20px;
}

.tile {
    position: absolute;
    background-color: rgb(115, 255, 50);
    cursor: pointer;
}

.tile:hover {
    background-color: darkgreen;
}

.disabled {
    background-color: black;
    border:1px solid black;
}

.enabled{
    background-color: white;
    border: 1px solid white;

}

#gameArea {
    background-color: black;
    position: relative;
    padding: 0px;
    border: 2px solid black;

}

這是我的 js 檔案和我的代碼

const max_clicks = 3;

const table_sz = 8;
const tile_sz = 88;
const border_w = 4;
const margin_w = 2;


let game_area;


function createTile(row, col){

    let tile;

    if ((row   col) % 2 === 0){

        tile = $('<div class = "tile disabled"></div>');
    }
    else{

        tile = $('<div class = "tile enabled"></div>');

        tile.attr('clicks', 0);
    }

    tile.css("margin", margin_w.toString()   "px");
    tile.css("border-width", border_w.toString()   "px");

    tile.attr('row', row);
    tile.attr('col', col);

    tile.css( {

        top: row * (tile_sz   2 * (border_w   margin_w) ),
        left: col * (tile_sz   2 * (border_w   margin_w) ),
        height: tile_sz,
        width: tile_sz,
    } );

    return tile;
}

function createTable(){

    for (let row = 0; row < table_sz;   row){

        for (let col = 0; col < table_sz;   col) {

            let tile = createTile(row, col);

            game_area.append(tile);
        }
    }
}

function createGameArea(){

    game_area = $('#gameArea');

    game_area.css( {

        height: 800,
        width: 800
    } );
}




function selectTileAt(position){

    return $(".tile[row="   position[0].toString()   "][col="   position[1].toString()   "]");
}



$(document).ready(function(){

    createGameArea();

    createTable();

} );

uj5u.com熱心網友回復：

如果要添加自定義資料屬性（行和列），最好使用標準data-*語法。這是向元素添加自定義屬性的通用且有效的方法。像這樣：

tile.attr("data-row", row);
tile.attr("data-col", col);

然后，在創建表的回圈內，您可以使用jQuery 的事件處理函式click為每個圖塊添加一個事件偵聽器。在該偵聽器中，您可以獲取單擊的圖塊的行和列：on

tile.on("click", function (evt) {
  console.log('Clicked row: ', $(evt.target).attr("data-row"));
  console.log('Clicked column: ', $(evt.target).attr("data-col"));
});

const max_clicks = 3;
const table_sz = 8;
const tile_sz = 88;
const border_w = 4;
const margin_w = 2;

let game_area;

function createTile(row, col) {
  let tile;

  if ((row   col) % 2 === 0) {
    tile = $('<div class = "tile disabled"></div>');
  } else {
    tile = $('<div class = "tile enabled"></div>');

    tile.attr("data-clicks", 0);
  }

  tile.css("margin", margin_w.toString()   "px");
  tile.css("border-width", border_w.toString()   "px");

  tile.attr("data-row", row);
  tile.attr("data-col", col);

  tile.css({
    top: row * (tile_sz   2 * (border_w   margin_w)),
    left: col * (tile_sz   2 * (border_w   margin_w)),
    height: tile_sz,
    width: tile_sz,
  });

  return tile;
}

function createTable() {
  for (let row = 0; row < table_sz;   row) {
    for (let col = 0; col < table_sz;   col) {
      let tile = createTile(row, col);

      tile.on("click", function (evt) {
        console.log("Clicked row: ", $(evt.target).attr("data-row"));
        console.log("Clicked column: ", $(evt.target).attr("data-col"));
      });

      game_area.append(tile);
    }
  }
}

function createGameArea() {
  game_area = $("#gameArea");

  game_area.css({
    height: 800,
    width: 800,
  });
}

$(document).ready(function () {
  createGameArea();
  createTable();
});

body {
  margin: 0;
  padding: 20px;
}

.tile {
  position: absolute;
  background-color: rgb(115, 255, 50);
  cursor: pointer;
}

.tile:hover {
  background-color: darkgreen;
}

.disabled {
  background-color: black;
  border: 1px solid black;
}

.enabled {
  background-color: white;
  border: 1px solid white;
}

#gameArea {
  background-color: black;
  position: relative;
  padding: 0px;
  border: 2px solid black;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="gameArea"></div>

轉載請註明出處，本文鏈接：https://www.uj5u.com/qiye/476975.html

標籤：javascript html jQuery css

上一篇：我如何實作e.preventDefault();在使用效果？

下一篇：按嵌套物件值對陣列進行排序