enter code here我的jQuery单击功能不起作用。以下是单击ID“技能”时要尝试运行的脚本。如果我不将整个函数包装在中，$(document).ready and $("#skills").click则在文档加载时该函数可以正常运行
$(document).on('click', 'skills', function() {
var gaugeConfig = { "canvasHolderId": "HTML", "width": "150", "height": "150", "circleColor": "#222", "arcColor": "#2ECC71", "canvasFillColor": "#333", "textPosition": "inside" , "skillLevel" : "7.5"}
var gaugeConfig1 = { "canvasHolderId": "CSS", "width": "150", "height": "150", "circleColor": "#222", "arcColor": "#2ECC71", "canvasFillColor": "#333", "textPosition": "inside" , "skillLevel" : "6.5"}
var gaugeConfig2 = { "canvasHolderId": "JS", "width": "150", "height": "150", "circleColor": "#222", "arcColor": "#27AE60", "canvasFillColor": "#333", "textPosition": "inside" , "skillLevel" : "7"}
var gaugeConfig3 = { "canvasHolderId": "JQ", "width": "150", "height": "150", "circleColor": "#222", "arcColor": "#F1C40F", "canvasFillColor": "#333", "textPosition": "inside" , "skillLevel" : "7"}
var gaugeConfig4 = { "canvasHolderId": "BT", "width": "150", "height": "150", "circleColor": "#222", "arcColor": "#F1C40F", "canvasFillColor": "#333", "textPosition": "inside" , "skillLevel" : "8"}
var gaugeConfig5 = { "canvasHolderId": "XML", "width": "150", "height": "150", "circleColor": "#222", "arcColor": "#F39C12", "canvasFillColor": "#333", "textPosition": "inside" , "skillLevel" : "7.5"}
var gaugeConfig6 = { "canvasHolderId": "JAVA", "width": "150", "height": "150", "circleColor": "#222", "arcColor": "#E67E22", "canvasFillColor": "#333", "textPosition": "inside" , "skillLevel" : "9"}
var gaugeConfig7 = { "canvasHolderId": "MVC", "width": "150", "height": "150", "circleColor": "#222", "arcColor": "#E67E22", "canvasFillColor": "#333", "textPosition": "inside" , "skillLevel" : "8.5"}
var gaugeConfig8 = { "canvasHolderId": "SP", "width": "150", "height": "150", "circleColor": "#222", "arcColor": "#D35400", "canvasFillColor": "#333", "textPosition": "inside" , "skillLevel" : "6.5"}
var gaugeConfig9 = { "canvasHolderId": "WB", "width": "150", "height": "150", "circleColor": "#222", "arcColor": "#E74C3C", "canvasFillColor": "#333", "textPosition": "inside" , "skillLevel" : "7"}
var gaugeConfig10 = { "canvasHolderId": "SQL", "width": "150", "height": "150", "circleColor": "#222", "arcColor": "#E74C3C", "canvasFillColor": "#333", "textPosition": "inside" , "skillLevel" : "8"}
var gaugeConfig11 = { "canvasHolderId": "HB", "width": "150", "height": "150", "circleColor": "#222", "arcColor": "#C0392B", "canvasFillColor": "#333", "textPosition": "inside" , "skillLevel" : "6.5"}
function drawGauge(gc) {
var W = gc.width;
var H = gc.height;
var degrees = 0;
var new_degrees = 0;
var difference = 0;
var color = gc.arcColor;
var bgcolor = gc.circleColor;
var text = gc.skillLevel;
var animation_loop, redraw_loop;
var me = this;
var canvasHolder = document.getElementById(gc.canvasHolderId);
var canvasCreator = document.createElement("canvas");
canvasCreator.id = _randomId();
canvasCreator.width = gc.width;
canvasCreator.height = gc.height;
canvasHolder.appendChild(canvasCreator);
var canvas = document.getElementById(canvasCreator.id);
function _randomId() {
var d = new Date();
return "canvas" + d.getFullYear() + "" + d.getMonth() + "" + d.getDay() + "" + d.getHours() + "" + d.getSeconds() + "" + d.getMilliseconds()*Math.random();
}
function _init() {
ctx = canvas.getContext("2d");
ctx.clearRect(0, 0, W, H);
ctx.beginPath();
ctx.strokeStyle = bgcolor;
ctx.lineWidth = 15;
ctx.arc(W / 2, H / 2, 50, 0, Math.PI * 2, false); //you can see the arc now
ctx.stroke();
var radians = degrees * Math.PI / 180;
ctx.beginPath();
ctx.strokeStyle = color;
ctx.lineWidth = 15;
ctx.arc(W / 2, H / 2, 50, 0 - 90 * Math.PI / 180, radians - 90 * Math.PI / 180, false);
ctx.stroke();
ctx.fillStyle = color;
ctx.font = "30px bebas";
text_width = ctx.measureText(text).width;
ctx.fillText(text, W / 2 - text_width / 2, H / 2 + 12);
}
function _animate_to() {
if (degrees == new_degrees)
clearInterval(animation_loop);
if (degrees < new_degrees)
degrees++;
else
degrees--;
_init();
}
function _draw() {
if (typeof animation_loop != undefined) clearInterval(animation_loop);
new_degrees = Math.round((text * 3600)/100);
difference = new_degrees - degrees;
animation_loop = setInterval(function () { _animate_to() }, 1000 / difference);
}
_draw();
}
new drawGauge(gaugeConfig);
new drawGauge(gaugeConfig1);
new drawGauge(gaugeConfig2);
new drawGauge(gaugeConfig3);
new drawGauge(gaugeConfig4);
new drawGauge(gaugeConfig5);
new drawGauge(gaugeConfig6);
new drawGauge(gaugeConfig7);
new drawGauge(gaugeConfig8);
new drawGauge(gaugeConfig9);
new drawGauge(gaugeConfig10);
new drawGauge(gaugeConfig11);
});
HTML：
<div id="HTML" class="skills"></div>
<div id="CSS" class="skills"></div>
<div id="JS" class="skills"></div>
<div id="JQ" class="skills"></div>
<div id="BT" class="skills"></div>
<div id="XML" class="skills"></div>
<div id="JAVA" class="skills"></div>
<div id="MVC" class="skills"></div>
<div id="SP" class="skills"></div>
<div id="WB" class="skills"></div>
<div id="SQL" class="skills"></div>
<div id="HB" class="skills"></div>
其他可能性，但很可能是两件事之一（或两者的结合）正在阻止这种情况。
#skills实际上应该是一个类而不是ID#skills不适用于jQuery，因此您可以尝试用替换$('#skills').click(function() { ... })为$(document).on('click', '#skills', function() { ... });本文收集自互联网，转载请注明来源。
如有侵权，请联系[email protected] 删除。
我来说两句