Question

我正在尝试创建一个jQuery函数，当我单击它时将一个形状打印到画布中。但是jQuery似乎并没有调用函数（makeCircle（））。语法是否有问题，或者我在jQuery之外的函数有什么问题？

HTML代码 -

<!DOCTYPE html>
<html>
    <canvas id = 'board' height = "600" width = "800" style="border:1px solid black";></canvas>
            <head>
        <title> Shape Drawing </title>
    <div id = "links">
    <script src="https://code.jquery.com/jquery-1.11.2.min.js"></script>
    <script src = "functions.js"></script>
    <link type = "text/css" rel = stylesheet href="main.css">

    </div>

    </head>
    <body>
        <h1 id = "shapes_title"> Shapes:</h1> 
        <div id = "buttons">
        <button id = 'Circle' onclick="circleTrue()"> Circle </button>
        <button id = "Square" onclick ="squareTrue()"> Square </button>
        <button id = "Triangle" onclick="triangleTrue"> Triangle </button>
        </div>
    </body>
</html>

我的JavaScript / jQuery -

var c = document.getElementById("board");
var ctx = c.getContext('2d');
var circle = true;
var square  = false;
var triangle = false;
var shape;

jQuery(function($) {
var currentMousePos = {x: -1, y: -1};
$(document).mousemove(function(event) {
    currentMousePos.x = event.pageX;
    currentMousePos.y = event.pageY;

});

});






//making circle true
function circleTrue() {
    if(circle = false) {
        circle = true;
        square = false;
        triangle = false;
    }
}
function squareTrue() {
 if(square = false) {
    circle = false;
    square = true;
    triangle = false;
}
}
function triangleTrue() {
    if(triangle = false) {
        circle = false;
        square = false;
        triangle = true;
    }
}


//making the circle (coord no)
function makeCircle() {
if(circle = true){
 ctx.beginPath();
 ctx.arc(100, 100, 50, 40, 0, 2*Math.PI);
 ctx.stroke();
}
else{
    console.log("You have not selected circle as an object!");
}
}

$(document).ready(function() {
//circle color jquery
 $("#Circle").mouseover(function() {
     $(this).css("color", "green");
 });
 $("#Circle").mouseout(function(){
     $(this).css("color", 'white');
 });

$("#Square").mouseover(function() {
    $(this).css("color", "green");

});
$("#Square").mouseout(function() {
    $(this).css("color", "white");
});
$("#Triangle").mouseover(function() {
    $(this).css("color", "green");
});
$("#Triangle").mouseout(function() {
    $(this).css("color", "white");
});
$("c").mousedown(function() {
  makeCircle();
});
});

Answer 1

您使用"c"作为选择器，找不到具有该标记名称的任何元素。即使它是ID选择器#c，我也看不到具有该ID的元素。

此外，在makeCircle内，您有if(circle = true){，应使用circle === true或circle代替circle = true。事实上，你有一堆if语句就是这样。

Answer 2

您需要传递正确的选择器。当您获得var c = document.getElementById("board");元素时，您需要使用c变量而不是字符串"c"或使用直接ID #board

var c = document.getElementById("board");
var ctx = c.getContext('2d');
var circle = true;
var square  = false;
var triangle = false;
var shape;

jQuery(function($) {
var currentMousePos = {x: -1, y: -1};
$(document).mousemove(function(event) {
    currentMousePos.x = event.pageX;
    currentMousePos.y = event.pageY;

});

});






//making circle true
function circleTrue() {
    if(circle = false) {
        circle = true;
        square = false;
        triangle = false;
    }
}
function squareTrue() {
 if(square = false) {
    circle = false;
    square = true;
    triangle = false;
}
}
function triangleTrue() {
    if(triangle = false) {
        circle = false;
        square = false;
        triangle = true;
    }
}


//making the circle (coord no)
function makeCircle() {
if(circle = true){
 ctx.beginPath();
 ctx.arc(100, 100, 50, 40, 0, 2*Math.PI);
 ctx.stroke();
}
else{
    console.log("You have not selected circle as an object!");
}
}

$(document).ready(function() {
//circle color jquery
 $("#Circle").mouseover(function() {
     $(this).css("color", "green");
 });
 $("#Circle").mouseout(function(){
     $(this).css("color", 'white');
 });

$("#Square").mouseover(function() {
    $(this).css("color", "green");

});
$("#Square").mouseout(function() {
    $(this).css("color", "white");
});
$("#Triangle").mouseover(function() {
    $(this).css("color", "green");
});
$("#Triangle").mouseout(function() {
    $(this).css("color", "white");
});
$(c).mousedown(function() {
  makeCircle();
});
});

<!DOCTYPE html>
<html>
    <canvas id = 'board' height = "600" width = "800" style="border:1px solid black";></canvas>
            <head>
        <title> Shape Drawing </title>
    <div id = "links">
    <script src="https://code.jquery.com/jquery-1.11.2.min.js"></script>
    <script src = "functions.js"></script>
    <link type = "text/css" rel = stylesheet href="main.css">

    </div>

    </head>
    <body>
        <h1 id = "shapes_title"> Shapes:</h1> 
        <div id = "buttons">
        <button id = 'Circle' onclick="circleTrue()"> Circle </button>
        <button id = "Square" onclick ="squareTrue()"> Square </button>
        <button id = "Triangle" onclick="triangleTrue"> Triangle </button>
        </div>
    </body>
</html>

在jQuery中调用JS函数（mousedown）

2 个答案: