为什么jQuery脚本可以在jFiddle上运行，但不能在我的本地计算机上运行？
我正在使用下面的jFiddle代码，粘贴到一个记事本文档中。当我启动html文件时，浏览器(Chrome、Firefox、nor如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>回答 3
Stack Overflow用户
发布于 2016-02-17 07:45:30
把你所有的scripts放在页面的底部。
您希望jQuery在页面加载之后执行，而不是在加载之前执行。这样，您的jQuery甚至在页面呈现之前就执行了，所以对$("#rows")的调用应该返回null。
Stack Overflow用户
发布于 2016-02-17 08:04:07
在你的JavaScript中，你有一个引用错误：
GRID_ELEMENT = $("#" + GRASP.config.gri5dContainer);
我相信你的本意是让它成为GRASP.config.gridContainer。我的猜测是这是一个打字错误。我纠正了这一点，它在本地工作。
另外:每个人都对提高你的质量提出了一些很好的建议：
head
- 中的
- 样式块在end
中加载脚本
Stack Overflow用户
发布于 2016-02-17 08:05:07
修复GRASP.config.gri5dContainer的拼写错误，代码工作正常，如中所示
应为GRASP.config.gridContainer
https://stackoverflow.com/questions/35445182
复制相似问题
腾讯云开发者
Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有
深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 
粤公网安备44030502008569号
腾讯云计算（北京）有限责任公司 京ICP证150476号 | 京ICP备11018762号