未捕获的TypeError：$.fn.maze不是函数
未捕获的TypeError：$.fn.maze不是函数
提问于 2017-06-13 06:05:37
js和html的新手。我在这里和许多网站尝试了不同的答案，但出于某些原因，我的代码仍然不能工作。我已经创建了一个名为mazePlugin.js的插件，另一个名为test.js的脚本和一个名为test.html的html文件。一旦点击一个按钮，测试脚本就会被调用，向我的服务器发送一个ajax请求(检查它是否正常工作)，并在成功时尝试调用我的插件并绘制一个迷宫。我知道在我定义画布的地方可能会有问题。但这不是我目前的问题。
我的html
<!DOCTYPE html> <html> <head>
<meta charset="utf-8" />
<title>test page</title> </head> <body>
<p id="paragraph">first paragraph</p>
<p id="paragraph2">2nd paragraph</p>
<input id="button" type="button" value="start game"/>
<form>
Name:<br/>
<input id="name" type="text"/><br/>
Columns:<br/>
<input id="col" type="number"/><br/>
Rows:<br/>
<input id="row" type="number"/> </form>
<script type="text/javascript" src="../Scripts/jquery-3.2.1.js"></script>
<script type="text/javascript" src="../Scripts/mazePlugin.js"></script>
<script type="text/javascript" src="../Scripts/test.js"></script>
</body>
</html>我的插件
(function($) {
$.fn.maze = function (data) {
var mazeObject = {
draw: function() {
var rows = data["Rows"];
var cols = data["Cols"];
var cellWidth = 300 / cols;
var cellHeight = 300 / rows;
var initialRow = data["Start"]["Row"];
var initialCol = data["Start"]["Col"];
var mazeAsString = data["Maze"];
//draws the maze
var current = 0;
for (var i = 0; i < rows; i++) {
for (var j = 0; j < cols; j++) {
if (mazeAsString[current] == '1') {
context.fillRect(cellWidth * j, cellHeight * i, cellWidth, cellHeight);
}
current++;
}
}
//creating players image
var united = new Image();
united.src = "../Style/united.png";
united.onload = function() {
context.drawImage(united, initialRow, initialCol, cellWidth, cellHeight);
}
return this;
}
};
return mazeObject;
};
}(jQuery));我的test.js
$('#button').click(function () {
var canvas = document.createElement('canvas');
canvas.id = "mazeCanvas";
canvas.width = 300;
canvas.height = 300;
canvas.style = "border:2px black solid";
document.body.appendChild(canvas);
var name = $('#name').val();
var rows = $('#row').val();
var cols = $('#col').val();
var context = canvas.getContext("2d");
var mazeObject;
$.ajax({
url: "Http://localhost:52800/api/Maze",
data: { 'name':name, 'rows':rows, 'cols':cols },
success: function (data) {
mazeObject = $.fn.maze(data);
mazeObject.draw();
},
error: function() {
alert('an error has occurred');
}
});
});我得到的响应是test.js:40未捕获TypeError：$.fn.maze不是Object.success (test.js:40) at fire (jquery-3.2.1.js:3317) at Object.fireWith as resolveWith at done (jquery-3.2.1.js:9272) at XMLHttpRequest的函数。(jquery-3.2.1.js:9514)
回答 1
Stack Overflow用户
发布于 2017-06-13 06:14:26
你错误地调用了你的插件。它应该是：
mazeObject = $.maze(data);页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/44509433
复制相关文章
相似问题
腾讯云开发者
