<分区>
关闭 7 年前。
- 编辑问题以包含 desired behavior, a specific problem or error, and the shortest code necessary to reproduce the problem .这将有助于其他人回答问题。
- 这个问题是由于打字错误或无法再重现的问题引起的。虽然类似的问题可能是on-topic在这里，这个问题的解决方式不太可能帮助 future 的读者。
标签 javascript jquery html css
<分区>
关闭 7 年前。
我正在使用下面的 jFiddle 代码，粘贴到记事本文档中。当我启动 html 文件时，浏览器(Chrome、Firefox 或 11)不显示 HTML 代码以外的任何内容。它应该是这样的:http://jsfiddle.net/Tfs2M/2/关于为什么 jQuery 中的网格不显示的任何想法？
<!DOCTYPE HTML>
<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js">
</script>
<script>
(function (GRASP, $) {
var GRID_ROWS,
GRID_COLS,
GRID_ELEMENT;
GRASP.config = {
gridContainer: "grid",
matrixContainer: "matrix",
matrixHeader: "matrixHeader"
};
GRASP.start = function () {
GRID_ROWS = $("#rows").val();
GRID_COLS = $("#cols").val();
createGrid();
};
function createGrid() {
GRID_ELEMENT = $("#" + GRASP.config.gri5dContainer);
var cell; // Contains the 1 or 0 based upon the cell selection
var newGrid = $('<div id="grid" class="gridContainer" ></div>');
for (var i = 1; i <= GRID_ROWS; i++) {
for (var j = 1; j <= GRID_COLS; j++) {
$("<div class='cell' data-hover-text='"+i+","+j+"'>0</div>")
.appendTo(newGrid)
.on("click", cellClick);
}
}
newGrid.height(38 * GRID_ROWS);
newGrid.width(38 * GRID_COLS);
GRID_ELEMENT.replaceWith(newGrid);
}
function cellClick() {
$(this).text($(this).text() == "0" ? "1" : "0");
}
}(window.GRASP = window.GRASP || {}, jQuery)); $(document).ready(function () {
GRASP.start();
});
</script>
</head>
<body >
<a href = "Practice Website.html"> Back to Page 1 </a>
<div id="gridLayout" class="gridLayout">
<div id="gridHeader">
<h2>Grid Configuration:</h2>
Grid Size:
<input id="rows" type="number" min="1" max="50" value="10" width="40" size="3" onChange="GRASP.start();"/>x
<input id="cols" type="number" min="1" max="50" value="10" width="40" size="3" onChange="GRASP.start();"/>
</div>
<div id="grid" class="gridContainer"></div>
</div>
</body>
<style>
.gridContainer {
position: relative;
margin-top: 10px;
padding: 0 0 0 0;
font-family: Arial, Helvetica, Verdana, sans-serif;
}
.cell {
width: 36px;
height: 36px;
position: relative;
float: left;
z-index: 0;
font-size: 18px;
color: #888888;
text-align: center;
line-height: 36px;
border-style: solid outset;
border-width: 1px;
border-color: black;
cursor: pointer;
}
.cell:hover {
background: #00CCFF;
}
.cell:hover:after {
content: attr(data-hover-text);
position: absolute;
top: 2px;
left: 2px;
right: 2px;
font-size: x-small;
font-weight: normal;
font-style: normal;
color: #444444;
text-align: left;
line-height: 1;
}
</style>
最佳答案
将所有脚本放在页面底部。
您希望您的 jQuery 在页面加载之后而不是之前执行。实际上，您的 jQuery 甚至在您的页面呈现之前就已执行，因此对 $("#rows") 的调用应该返回 null。
关于javascript - 为什么 jQuery 脚本可以在 jFiddle 上运行，但不能在我的本地机器上运行？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/35445182/