Question

我正在使用下面的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>

Answer 1

将所有scripts放在页面底部。

您希望在页面加载之后执行jQuery。因此，您的jQuery在页面呈现之前执行，因此对$("#rows")的调用应返回null。

Answer 2

在JavaScript中，您有一个引用错误：

GRID_ELEMENT = $("#" + GRASP.config.gri5dContainer);

我相信你的意思是GRASP.config.gridContainer。我的猜测是这是一个错字。我纠正了这个问题，它在当地有效。

此外：其他人都提出了一些改善质量的好建议：

头部的样式块
最后加载脚本

Answer 3

修正GRASP.config.gri5dContainer的拼写错误，代码正常，如this demo

中所示

应为GRASP.config.gridContainer

为什么jQuery脚本在jFiddle上运行，但在我的本地机器上运行？

3 个答案: