使用jQuery的网格大小调整程序
使用jQuery的网格大小调整程序
提问于 2009-09-01 12:43:31
我正在用jQuery用JavaScript写一个小游戏。这个游戏有一个棋盘，里面有单元格，很像扫雷游戏:用户点击一个单元格，它的数据需要以某种方式进行更改。每个单元格都由一张简单的图像表示，但有一些与其关联的更多数据。
我最需要的是，当用户单击一个单元格时，我必须以某种方式确定所单击的行和列，适当地操作数据并更改视图。
一方面，在每个单元格上设置click处理程序似乎有点过分，但是如果您在整个表上设置click处理程序，那么确定哪个表单元格被单击就变成了PITA。
你会如何处理这样的情况？也许已经有一个插件可以简化整个事情了？
回答 5
Stack Overflow用户
回答已采纳
发布于 2009-09-01 12:59:57
这是一个很好地使用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
});最好的事情是，无论你有多少个单元格，只有一个事件处理程序可以让有更好的性能。
Stack Overflow用户
发布于 2009-09-01 12:52:08
在整个表上添加click处理程序。使用event.target获取单击的单元格。为每个单元格添加一个属性，它会告诉你它是什么行/列，这样你就不必运行任何大量/繁重的JS来找出它。
psuedocode：
$("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>注意:名称以数字开头是不好的，所以请根据需要进行修复
Stack Overflow用户
发布于 2009-09-01 12:54:16
如果您的表是动态生成的(例如js或php )，那么您可以让每个单元格都有一个class和/或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
});页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/1362286
复制相关文章
相似问题
腾讯云开发者
