如何使用HTML、CSS、Javascript和If Useful JQuery创建可点击分区的坐标网格

How Can I Create a Coordinate Grid of Clickable Divs Using HTML, CSS, Javascript and If Useful JQuery?

本文关键字：分区 网格 坐标 创建 Useful CSS HTML 何使用 Javascript If JQuery      更新时间：2023-09-26

链接到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>

我被彻底难住了。我上面有一个简单的例子（不是标签，不确定它们是否有效，它们只是组织性的，CSS在实际实现中是从一个单独的.CSS中正确加载的，当然只是简单地将sans插入到JSFiddle上的CSS字段中）。

九个div，以简单的三乘三的模式排列，每个div都是一个图像。与行和列相对应的ID和类有三种类型。

这对第一列起到了预期的作用，为第一列提供了行和列的控制台日志（检查结果字段*）。但是，对于右边的两列，只注意列，就好像它们没有行ID一样。

我一直在努力解决这个看似简单的问题，但根本做不到。帮助谢谢

*在Chrome中，右键单击JSFiddle的Result屏幕（四个窗格的右下角），然后单击Inspect Element，以及其他信息，窗口将有一个控制台，记录console.log（）调用。

这是JSFiddle的更新版本，它使用类而不是行的id：http://jsfiddle.net/troygizzi/4v2n7wk9/5/

修改了以下摘录。

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:

$(".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：

.first_row{
    position:absolute;
    margin-top:0;
}
.second_row{
    position:absolute;
    margin-top:64px;
}
.third_row{
    position:absolute;
    margin-top:128px;
}
相关文章：