我有一个 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();
} );回答1
如果要添加https://developer.mozilla.org/en-US/docs/Learn/HTML/Howto/Use_data_attributes（行和列），最好使用标准data-* 语法。这是向元素添加自定义属性的通用且有效的方法。像这样：
tile.attr("data-row", row);
tile.attr("data-col", col);然后，在创建 table 的循环内，您可以使用 https://api.jquery.com/on/ 为每个图块添加一个 click 事件侦听器。在该侦听器中，您可以获取单击的图块的行和列：
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>