Javascript 使用jQuery的网格大小调整器

我正在用JavaScript编写一个小游戏，使用jQuery。这个游戏有一个棋盘，里面有单元格，很像扫雷舰：用户点击一个单元格，它的数据需要以某种方式改变。每个单元格都由一个简单的图像表示，但有更多与之相关的数据

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

一方面，在每个单元格上设置click处理程序似乎有些过分，但如果在整个表上设置click处理程序，则确定单击了哪个表单元格将成为PITA

---

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

在整个表中添加单击处理程序。使用event.target获取单击的单元格。为每个单元格添加一个属性，告诉您它是什么行/列，这样您就不必运行任何大量/大量的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>

sdfasdfa

---

注意：名称以数字开头是不好的，因此根据需要进行修复

在整个表上添加单击处理程序。使用event.target获取单击的单元格。为每个单元格添加一个属性，告诉您它是什么行/列，这样您就不必运行任何大量/大量的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>

sdfasdfa

---

注意：名称以数字开头并不好，因此根据需要进行修复

如果您的表是动态生成的（例如js或php），那么您可以让每个单元格具有提供信息的类和/或id属性

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

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

---

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

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

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

---

如果您有太多的表格单元格设置，单击处理程序会很繁重，但您可以通过鼠标单击的event.page.X和event.page.Y来计算框号，这将给出屏幕上单击像素的坐标，您可以计算该像素下的框

或

您还可以使用event.target来单击节点

退房

---

希南，希望这能有所帮助。

如果你有太多的表格单元格，那么点击处理程序会很繁重，但是你可以通过鼠标点击的event.page.X和event.page.Y来计算框号，这将给出你屏幕上点击像素的坐标，你可以计算出哪个框在该像素下

或

您还可以使用event.target来单击节点

退房

---

希南，希望能有所帮助。

这是一个非常好地使用

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

---

最好的一点是，无论您有多少个单元格，只有一个事件处理程序可以大大提高性能。

这是一个非常好地使用

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

---

---

最好的一点是，无论有多少个单元格，只有一个事件处理程序可以大大提高性能。

单击事件气泡和原始目标可以在事件对象的srcElement属性中找到（我认为，或者它可能是另一个属性，但它就在那里）.

点击事件气泡和原始目标可以在事件对象的srcElement属性中找到（我认为，或者它可能是另一个属性，但它就在那里）。

你到底在说什么“大/重JS”？看看我的答案有多简单。maksymko说他在每个单元格中都有一个图像，因此

e.target

可能就是图像，在这种情况下，这种方法不起作用。否？在这种情况下，将图像的name属性设置为单元格坐标。问题solved@nickf：您的答案需要解析dom树。如果dom树很大，那么这将很慢。我的答案要求每次点击只解析一个属性你到底在说什么“海量/重JS”？看看我的答案有多简单。maksymko说他在每个单元格中都有一个图像，因此

e.target

可能就是图像，在这种情况下，这种方法不起作用。否？在这种情况下，将图像的name属性设置为单元格坐标。问题solved@nickf：您的答案需要解析dom树。如果dom树很大，那么这将很慢。我的答案要求每个元素只解析一个属性click@nickf它可以是一行代码，但是你必须考虑它在场景后面分配多少内存，“重”并不意味着你写了多少行。@ Shana:它遍历节点数，可能在1-30个节点的范围内。我认为你的电脑可以处理它。@nickf，如果有30个节点，甚至300个节点，你是对的，如果每个单元都是10×10像素呢？如果游戏区域为1000x1000，那么您可以计算将有多少节点，但一个简单的数学函数可以轻松计算在哪个单元格上触发单击，因为您知道单元格有多大，然后您可以轻松运行任何必要的操作。最好的。斯南。一个词：脆弱。您永远无法确定在任何浏览器中如何渲染某些内容。即使有1000或10000个节点，对于浏览器来说，每次单击计算一次也不算太多。易读性和可维护性战胜了脆弱的解决方案，获得的收益微乎其微。以下是我的测试结果：如果你有一个10000宽的扫雷舰网格，点击最后一个网格，大约需要0.12秒@nickf，它可以是一行