how do i get the coordinates of a click in jquery?-CodePudding

I have a div in it with an 8x8 div. I want to use jquery for practicing. How can i get which div in which row and column i clicked on? I tried to use event.pageX and event.pageY but it specifies the coordinate of the click and I would like to get the row and the column

<!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>

I have a css file too

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;

}

And here's my js file with my code

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();

} );

CodePudding user response：

If you're adding custom data attributes (row and column), it best to do so using the standard data-* syntax. This is the general and valid way to add custom attribute to elements. Like this:

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

Then, inside the loop that creates the table, you can add a click event listener for each tile using jQuery's on event handler function. Inside that listener you can get the row and column of the tile that was clicked:

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>