1
ドキュメントの準備ができたら、JQueryでコードを初期化するのに問題があります。 Chromeのデベロッパーモードではフラグなしでコードが実行されますが、何もロードされません。元の著者は、JQuery Compat Edge、which officially was never releasedを使用しました。これは問題ですか？JQuery互換エッジの償却バージョンは、このコードが実行されないことを意味しますか？
私が使用しているコードは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つのプログラムを作成しています。初心者のためのより適切なサイトがある場合は、コメントにメモを残してください。
ありがとうございました！
スニペットまたはjsFiddleを作成した場合は、投票が行われない場合に役立ちます。 –
すべてのリソースが正しくロードされているか、404を取得していますか？私は 'src =" Coordinate Plane.js "'に気付きました。一般的に言えば、jsファイル名には空白を使用しません。 –
@cale_b良い点、私は未来のためにそれを覚えています。これはjsFiddleコード（http://jsfiddle.net/Tfs2M/2/）から来た、私はちょうどノートパッド+ +でロードするコードを取得することはできません。 – mister