如何使用HTML，CSS，Javascript和有用的JQuery创建可单击Div的坐标网格？

Question

Link to the code on JFiddle: http://jsfiddle.net/4v2n7wk9/1/ 链接到JFiddle上的代码： http : //jsfiddle.net/4v2n7wk9/1/

<html>
<head>
<title>A Grid Button Example</title>
<script src="//code.jquery.com/jquery-1.10.2.js"></script>
<script src="//code.jquery.com/ui/1.11.1/jquery-ui.js"></script>
<style>
div{
    display:inline-block;
    margin-left:-2px;
    margin-right:-2px;
    margin-top:-4px;
    margin-bottom:-4px;
    position:relative;
}

.inl{
    position:absolute;
    display:block;
}

.top{
    position:absolute;
    z-index:auto;
}

.feature_layer{
    position:absolute;
    z-index:-2;
}

.unit_layer{
    position:absolute;
    z-index:-1;
}

.first_column{
    position:absolute;
    margin-left:0;
}

.second_column{
    position:absolute;
    margin-left:64px;
}

.third_column{
    position:absolute;
    margin-left:128px;
}

#first_row{
    position:absolute;
    margin-top:0;
}

#second_row{
    position:absolute;
    margin-top:64px;
}

#third_row{
    position:absolute;
    margin-top:128px;
}
</style>
</head>
<body>
<script>
$(document).ready(function(){
    $("#first_row").on("click",function(){
        console.log("First row clicked.");
    });
    $("#second_row").on("click",function(){
        console.log("Second row clicked.");
    });
    $("#third_row").on("click",function(){
        console.log("Third row clicked.");
    });

    $(".first_column").on("click",function(){
        console.log("First column clicked.");
    });
    $(".second_column").on("click",function(){
        console.log("Second column clicked.");
    });
    $(".third_column").on("click",function(){
        console.log("Third column clicked.");
    });
});
</script>
Menu Below<br>
<div id="first_row" class="first_column"> <img src="http://i.imgur.com/WZfLsKD.gif"/> </div>
<div id="second_row" class="first_column"> <img src="http://i.imgur.com/WZfLsKD.gif"/> </div>
<div id="third_row" class="first_column"> <img src="http://i.imgur.com/WZfLsKD.gif"/> </div>

<div class="second_column" id="first_row" > <img src="http://i.imgur.com/WZfLsKD.gif"/> </div>
<div id="second_row" class="second_column"> <img src="http://i.imgur.com/WZfLsKD.gif"/> </div>
<div id="third_row" class="second_column"> <img src="http://i.imgur.com/WZfLsKD.gif"/> </div>

<div id="first_row" class="third_column"> <img src="http://i.imgur.com/WZfLsKD.gif"/> </div>
<div id="second_row" class="third_column"> <img " src="http://i.imgur.com/WZfLsKD.gif"/> </div>
<div id="third_row" class="third_column"> <img src="http://i.imgur.com/WZfLsKD.gif"/> </div>
</body>
</html>

I have been thoroughly stumped. 我已经彻底陷入了困境。 I have a simple example above (not tags, not sure they'd work, they're merely organizational, the CSS is properly loaded from a seperate .css in the actual implementation, and of course is simply inserted sans- into the CSS field on JSFiddle). 我在上面有一个简单的示例（不是标签，不确定它们是否起作用，它们只是组织性的，在实际实现中从单独的.css正确加载了CSS，当然只是将sans-插入CSS字段中了在JSFiddle上）。

Nine divs, arranged in a simple three-by-three pattern, each an image. 九个div，以简单的三乘三的模式排列，每个图像。 There are three types of IDs and three types of classes corresponding to rows and columns. 对应于行和列的ID分为三种和三种类。

This works as expected for the first column, providing console logs (inspect the result field*) of row and column for the first column. 这对于第一列是预期的，为第一列提供行和列的控制台日志（检查结果字段*）。 However, only columns are noted for the two columns to the right, as if they didn't have row IDs. 但是，右侧的两列仅注明了列，好像它们没有行ID。

I've been trying to wrap my head around this seemingly simple problem and simply can't. 我一直在努力解决这个看似简单的问题，而根本做不到。 Help! 救命！ Thanks. 谢谢。

*In Chrome right click on JSFiddle's Result screen (lower-right hand of the four panes) and then click on Inspect Element, along with other information the window will have a console that records console.log() calls. *在Chrome中，右键单击JSFiddle的Result屏幕（四个窗格的右下角），然后单击Inspect Element，以及其他信息，该窗口将具有一个控制台，该控制台记录console.log（）的调用。

Answer 1

Here's an updated version of that JSFiddle which uses classes instead of ids for the rows: http://jsfiddle.net/troygizzi/4v2n7wk9/5/ 这是该JSFiddle的更新版本，该JSFiddle使用类代替行的id： http : //jsfiddle.net/troygizzi/4v2n7wk9/5/

Modified excerpts below. 修改后的摘录如下。

HTML: HTML：

<div class="first_row first_column"> <img src="http://i.imgur.com/WZfLsKD.gif"/> </div>
<div class="second_row first_column"> <img src="http://i.imgur.com/WZfLsKD.gif"/> </div>
<div class="third_row first_column"> <img src="http://i.imgur.com/WZfLsKD.gif"/> </div>

<div class="first_row second_column"  > <img src="http://i.imgur.com/WZfLsKD.gif"/> </div>
<div class="second_row second_column"> <img src="http://i.imgur.com/WZfLsKD.gif"/> </div>
<div class="third_row second_column"> <img src="http://i.imgur.com/WZfLsKD.gif"/> </div>

<div class="first_row third_column"> <img src="http://i.imgur.com/WZfLsKD.gif"/> </div>
<div class="second_row third_column"> <img " src="http://i.imgur.com/WZfLsKD.gif"/> </div>
<div class="third_row third_column"> <img src="http://i.imgur.com/WZfLsKD.gif"/> </div>

JavaScript: JavaScript的：

$(".first_row").on("click",function(){
    console.log("First row clicked.");
});
$(".second_row").on("click",function(){
    console.log("Second row clicked.");
});
$(".third_row").on("click",function(){
    console.log("Third row clicked.");
});

CSS: CSS：

.first_row{
    position:absolute;
    margin-top:0;
}

.second_row{
    position:absolute;
    margin-top:64px;
}

.third_row{
    position:absolute;
    margin-top:128px;
}

如何使用HTML，CSS，Javascript和有用的JQuery创建可单击Div的坐标网格？

问题描述

1 个解决方案

解决方案1
1 已采纳 2014-10-12 01:14:34

如何使用HTML，CSS，Javascript和有用的JQuery创建可单击Div的坐标网格？

问题描述

1 个解决方案

解决方案1 1 已采纳 2014-10-12 01:14:34

解决方案1
1 已采纳 2014-10-12 01:14:34