Fatal编程技术网
  • javascript/
  • Javascript 为什么jQuery脚本在jFIDLE上工作，而在我的本地机器上不工作？

Javascript 为什么jQuery脚本在jFIDLE上工作，而在我的本地机器上不工作？

javascript jquery html css

Javascript 为什么jQuery脚本在jFIDLE上工作，而在我的本地机器上不工作？,javascript,jquery,html,css,Javascript,Jquery,Html,Css,我正在使用下面的jFiddle代码，粘贴到记事本文档中。当我启动html文件时，浏览器（Chrome、Firefox或I.e.11）不会显示html代码以外的任何内容。这就是它应该看起来的样子：关于为什么jQuery中的网格不显示有什么想法吗 <!DOCTYPE HTML> <html> <head> <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js

我正在使用下面的jFiddle代码，粘贴到记事本文档中。当我启动html文件时，浏览器（Chrome、Firefox或I.e.11）不会显示html代码以外的任何内容。这就是它应该看起来的样子：关于为什么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>


（功能（抓取，$）{
var GRID_行，
格鲁科尔斯，
网格单元；
grass.config={
gridContainer：“网格”，
matrixContainer:“矩阵”，
matrixHeader：“matrixHeader”
};
grass.start=函数（）{
网格行=$（“#行”）.val（）；
GRID_COLS=$（“#COLS”）.val（）；
createGrid（）；
};
函数createGrid（）{
网格元素=$（“#”+grass.config.gri5dContainer）；
var cell；//包含基于单元格选择的1或0
var newGrid=$（''）；

对于（var i=1；i将所有的
脚本
放在页面底部


您希望您的
jQuery
在页面加载之后而不是之前执行。实际上，jQuery是在页面呈现之前执行的，因此对
$（“#行”）
的调用应返回null。
将所有
脚本放在页面底部


您希望在加载页面之后而不是之前执行
jQuery
。实际上，jQuery是在页面呈现之前执行的，因此对
$（“#行”）
的调用应返回null。
在JavaScript中，您有一个引用错误：


GRID_元素=$（“#”+GRASP.config.gri5dContainer）；

我相信你的意思是
GRASP.config.gridContainer
。我猜这是一个打字错误。我纠正了这个问题，它在本地工作

此外：
其他人都提出了一些关于提高质量的好建议：


  • 头上的样式块
    • 

  • 在末尾加载脚本
    • 

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

    GRID_元素=$（“#”+GRASP.config.gri5dContainer）；
    
我相信你的意思是
    GRASP.config.gridContainer
    。我猜这是一个打字错误。我纠正了这个问题，它在本地工作
    
此外：
其他人都提出了一些关于提高质量的好建议：
    

  • 头上的样式块
    • 

  • 在末尾加载脚本
    • 

    修复
    grass.config.gri5dContainer的打字错误，代码工作正常，如中所示
    

    应该是
    grass.config.gridContainer
    修复
    grass.config.gridContainer
    的打字错误，代码工作正常，如中所示
    

    应该是
    grass.config.gridContainer
    打开控制台（点击F12）。您看到了什么错误？常规专业提示：
    属于
    中，通常最好将
    放在
    的底部。默认情况下，jsiddle运行JS
    onload
    ，
    标记在解析文档时运行（大多数DOM节点还不存在）。显示的代码与演示中的代码有误。
    GRASP.config.gri5dContainer
    未定义在控制台上（点击F12）。您看到了什么错误？常规专业提示：
    属于
    中，通常最好将
    放在
    的底部。默认情况下，jsiddle运行JS
    onload
    ，
    标记在解析文档时运行（大多数DOM节点还不存在）。与演示中的代码相比，您在显示的代码中有打字错误
    GRASP.config.gri5dContainer
    未定义，但
    GRASP.start（）
    在
    $（文档）中调用。ready（函数（）
    ），因此此答案对于元素存在后将执行的OP是不正确的。未回答OP的问题或problem@charlietfl
    GRASP.start（）
    可以在document ready上调用，但是其余的函数是初始化的，并在读取时指向DOM元素。这意味着辅助函数都指向
    null
    类型，而不是DOM元素。它们不是…直到
    GRASP.start（）才被调用
    。代码中的整个问题都是输入错误，我想你可能是对的。我把函数编程声明和jQuery函数定义混淆了，哦！请参阅我答案中的演示…当输入错误被修复时，代码可以正常工作，但
    GRASP.start（）
    在
    $（文档）中调用。就绪（函数（）
    因此，关于OP将在元素存在后执行的问题，此答案是不正确的。不回答OP的问题或problem@charlietfl
    GRASP.start（）
    可以在document ready上调用，但是其余的函数是初始化的，并在读取时指向DOM元素。这意味着辅助函数都指向
    null
    类型，而不是DOM元素。它们不是…直到
    GRASP.start（）才被调用
    。代码中的整个问题都是输入错误，我想你可能是对的。我把函数编程声明和jQuery函数定义混淆了，哎呀！请看我答案中的演示……当输入错误被修复时，代码工作正常。#3……jQuery在操作代码之前加载。这是无效的issue@charlietfl我没想到他是前男友在
    $（document）.ready（）之后执行它。
    感谢您指出，#3…jQuery在OP代码之前加载没有任何错误。这是无效的issue@charlietfl我没注意到他是在一个
    $（文档）之后执行的。ready（）
    谢谢你指出这一点