Question

我正在使用jQuery在JavaScript中编写一个小游戏。游戏中有一个棋盘，其中有单元格，就像扫雷一样：用户点击一个单元格，其数据需要以某种方式进行更改。每个单元格都由一个简单的图像呈现，但还有一些与之相关的数据。

我最需要的是，当用户点击一个单元格时，我必须以某种方式确定被点击的行和列，适当地操纵数据并更改视图。

一方面，在每个单独的单元格上设置单击处理程序似乎是一种矫枉过正，但如果在整个表格上设置单击处理程序，它将成为PITA以确定单击了哪个表格单元格。

你会如何处理这种情况？也许有一个插件已经可以简化整个事情了？

Answer 1

在整个表格上添加点击处理程序。使用 event.target 获取点击的单元格。为每个单元格添加一个属性，告诉你它是什么行/ col，这样你就不必运行任何大量/重型的JS来解决它。

伪码：

$("table.game").click(function(e){
  var cell = e.target;
  var pos = $(cell).attr("name").split["_"];
  var x = pos[0];
  var y = pos[1];
  return false;
});

标记：

<table class="game">
  <tbody>
  <tr>
   <td name="0_0">
     sdfasdfa
   <td>
  </tr>
  </tbody>
</table>

注意：名字以数字开头并不好，所以根据需要修复

Answer 2

这是充分利用live()功能的完美示例。要找到x和y位置，您只需要计算此单元格之前或之前的行数：

$('#minesweeperTable td').live('click', function() {
    var $this = $(this),
        xPos = $this.prevAll('td').length,
        yPos = $this.closest('tr').prevAll('tr').length
    ;
    // your code here
});

关于这一点最好的事情是，无论你有多少个单元格，只有一个事件处理程序，这会使更多更好的性能。

Answer 3

如果你的表是动态生成的（例如js或php），你可以让每个单元格都有一个类和/或id属性，为你提供信息。

我不知道你如何用伪代码表示你的单元格：

<table id="board">
  <row>
    <cell id="cell-0x0" />
    <cell id="cell-0x1" />
    ...
  </row>
  <row>
    <cell id="cell-1x0" />
    ...
  </row>
  ...
</table>

然后在jQuery中：

$('#board cell').click(function(){
  var coord = $(this).attr('id').substr(5).split('x');
  // do your stuff
});

Answer 4

如果您设置的表单元格太多，则单击处理程序会很重，但您可以通过鼠标单击的event.page.X和event.page.Y来计算框号，这样就可以得到点击像素的坐标您的屏幕，您可以计算该像素下的哪个方框。

或者

您还可以使用event.target获取点击的节点。

结帐jquery.event。

希望它有所帮助，思南。

Answer 5

click事件会冒泡，原始目标可以在事件对象的srcElement属性中找到（我想，或者它可能是另一个属性，但它就在那里）。

使用jQuery的Grid Sizer

5 个答案: