未捕获的TypeError：$ .fn.maze不是函数

Question

js和html的新功能。 在这里和许多网站都尝试过不同的答案，但是对于某些原因，我的代码仍然无法正常工作。 我创建了一个名为mazePlugin.js的插件，另一个名为test.js的脚本，以及我的html文件，名为test.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 Uncaught TypeError：$ .fn.maze不是Object.success（test.js：40）在Object.fireWith着火时（jquery-3.2.1.js：3317）的函数[作为resolveWith]（jquery-3.2.1.js：3447）在XMLHttpRequest处完成（jquery-3.2.1.js：9272）。 （jquery的-3.2.1.js：9514）

Answer 1

您错误地调用了插件。 它应该是：

mazeObject = $.maze(data);

未捕获的TypeError：$ .fn.maze不是函数

问题描述

1 个解决方案

解决方案1
0 2017-06-12 22:14:26

未捕获的TypeError：$ .fn.maze不是函数

问题描述

1 个解决方案

解决方案1 0 2017-06-12 22:14:26

解决方案1
0 2017-06-12 22:14:26