当文档准备好时,我在让JQuery初始化我的代码时遇到了问题。Chrome中的开发人员模式运行代码时没有任何标志,但也没有加载任何内容。原始作者使用JQuery Compat Edge,which officially was never released。这很重要吗?
我使用的代码来自http://jsfiddle.net/Tfs2M/2/。我研究了here和here,发现很多人的代码加载都有问题。JQuery在这方面做得很好,所以我做了一些我认为合适的修改。我注意到作者使用的是Compact Edge。This was a cutting edge version of JQuery about 3 years ago no longer in use。我认为JQuery 3.2.1就足够了,这就是我想出来的。
function starter(GRASP) { //removed $ reference and added a func name.
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() {
//Love to know what the # is doing
GRID_ELEMENT = $("#" + GRASP.config.gridContainer);
var cell; // Contains the 1 or 0 based upon the cell selection
var newGrid = $('<div id="grid" class="gridContainer" ></div>');
//add cells to grid top to bottom with class 'cell and hover attribute
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);
newGrid.on('click', '.cell', cellClick);
}
}
newGrid.height(38 * GRID_ROWS);
newGrid.width(38 * GRID_COLS);
//add all the new cells to GRID_ELEMENT
GRID_ELEMENT.replaceWith(newGrid);
}
//Changes contents of a cell from 0 to 1, fancy if else statement
function cellClick() {
$(this).text($(this).text() == "0" ? "1" : "0");
}
} // removed the null, false, undefined code since I was using JQuery我还添加了以下JQuery。
$(document).ready(function () {
starter();
});这是HTML,如果这有什么用的话。
<html>
<head>
<link rel="stylesheet" type="text/css" href="Coordinate Plane.css">
<script type="text/javascript" src="Coordinate Plane.js"></script>
<script src="jquery-3.2.1.min.js"></script>
<script type="text/javascript" src="Coordinate PlaneJQ.js">
</head>
<body>
<div id="gridLayout" class="gridLayout">
<div id="gridHeader">
<h2>Aperture 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>
</html>像这样的帖子被投票否决了,到目前为止,我已经用Javascript写了大约3个程序。如果有更适合初学者的网站,请在评论中留言。
谢谢!
发布于 2017-08-02 20:31:37
如果不抛出控制台错误,您的脚本将无法按原样运行。原因是,您已经将代码从您引用的Fiddle (不完全地,有各种问题)从一个立即调用的函数"Class“”半转换“为,好吧,您在这里得到的代码。
问题#1是GRASP没有被定义,因为你修改了生命的最后一部分。
在调用starter()之前将其添加到某个位置就可以解决这个问题。
window.GRASP = {};
问题#2是您设置function starter(GRASP)接受要传入的变量GRASP,但是您没有传入它,所以它在函数中仍然是未定义的。我已经删除了它,并将其简单地设置为function starter()。
以下是您的代码的工作Fiddle,更新后可正常工作。
https://stackoverflow.com/questions/45448843
复制相似问题