如何仅在网格图片中的特定列中获取坐标

Question

是否有可能从图片中的特定列中获取坐标,就像它会说当我将鼠标悬停在第1列上时,它会像第1列cordinate 1,1那样给我,然后我将鼠标悬停在第2列上它会像第2列那样给我cordinate 1,1

<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<div><span id="image_coords_click"></span><span id="image_coords_now"> </span></div>
<img id="image" class="aligncenter" src="http://4.bp.blogspot.com/-c0lydOomMh8/UdMXTLn0frI/AAAAAAAAKdU/xa8kZMf23uQ/s721/100+number+grid.png" width="1475" height="1475" />
<script type="text/javascript">
  $('#image').mousemove( function(event) {
	window.current_x = Math.round(event.pageX - $('#image').offset().left);
	window.current_y = Math.round(event.pageY - $('#image').offset().top);
	window.current_coords = window.current_x + ', ' + window.current_y;
	$('#image_coords_now').html('Column: ' + window.current_coords + '.');
  }).mouseleave( function() {
	$('#image_coords_now').html('&nbsp;');
  }).click( function() {
	$('#image_coords_click').html('Last click: ' + window.current_coords + '. ');
  });
</script>

Answer 1

尝试观看这个：jsfiddle

function column(){
  var cell1={x0:21,y0:25,x1:163,y1:165};
var x=$('#x').html();
var y=$('#y').html();
/*
  console.log(x);
  console.log(y);
  console.log(cell1['x0']);
  console.log(cell1['x1']);
  console.log(cell1['y0']);
  console.log(cell1['y1']);
*/
if (x>=cell1['x0'] && x<=cell1['x1'] && y>=cell1['y0'] && y<=cell1['y1'])
{
console.log('cell oone');
}
else {
console.log('other cell');

}

我的想法是：

• 我定义了 cell1，坐标为 '{x0: 21, y0: 25, x1: 163, y1: 165};'
• 我在点击时获取了坐标

• 按下按钮，检查坐标是否在我定义的cell1内

  1. 转到一号牢房
  2. 用鼠标点击
  3. 按下按钮
  4. 看控制台

我以为它只适用于一个单元格，它最终会应用于剩余的单元格，但这是一项艰巨的工作

新代码：jsfiddle

1. 单击您想要的单元格