jQuery getScript() 和一个 div 元素 ID
jQuery getScript() and a div element id
我正在使用 jQuery 将 div 添加到我想用作另一个脚本(在本例中为 p5)生成的内容的页面。如果我分配一个带有 id='p5canvas' 的静态 div ,它会工作正常但是当我使用 jQuery 添加动态内容时(见下文),没有任何反应,我不明白为什么。谁能解释一下我 wrong/what 丢失了什么?
main.php
<html>
<script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/1.4.1/p5.min.js"></script>
<!-- and other stuff-->
<button class="continueButton" id="btn3" value="blah"> Blah</button>
<!-- and other stuff-->
</html>
jQuery.js
$("#btn3").click(function(){
$("#contentbox3").load("graphic2.html");
$.getScript("animatebug.js");//a p5 animation
});
graphic2.html
<div id="p5canvas"></div>
animatebug.js
function setup(){
createCanvas(400, 400);
background(200,100,0);
img = loadImage("images/bug_small.gif");
const myCanvas = createCanvas(400, 400);
myCanvas.parent('p5canvas');
image(img, 0, 0);
}
function draw(){
background(200,100,0);
image(img, 100, 100);
}
这里的执行顺序非常重要,这也是问题所在。 header 中的 p5 脚本正在寻找 setup()
函数,以便在您尚未加载 <div id="p5canvas"/>
目标元素或包含 animatebug.js
文件时调用功能。
您需要确保这两个事件都发生了 -- html 加载和脚本加载 -- 然后您可以正确执行脚本。
您可以使用 p5 instance mode.
控制何时调用 p5 函数
const animateBug = function(p) {
let img;
p.setup = function() {
const myCanvas = p.createCanvas(400, 400);
p.background(200, 100, 0);
img = p.loadImage("https://www.gravatar.com/avatar/ddffc30b6adba9c402d2f6d8902c47fb?s=64&d=identicon&r=PG&f=1");
myCanvas.parent('p5canvas');
p.image(img, 0, 0);
}
p.draw = function() {
p.background(200, 100, 0);
p.image(img, 100, 100);
}
}
然后你通过调用
来执行这个
new p5(animateBug);
您很可能想在 jQuery 中调用 new p5(animateBug);
,这样您就可以确保 load()
和 getScript()
都先完成。但我不是 jQuery 专业人士,所以我无法在这方面帮助您。
我正在使用 jQuery 将 div 添加到我想用作另一个脚本(在本例中为 p5)生成的内容的页面。如果我分配一个带有 id='p5canvas' 的静态 div ,它会工作正常但是当我使用 jQuery 添加动态内容时(见下文),没有任何反应,我不明白为什么。谁能解释一下我 wrong/what 丢失了什么?
main.php
<html>
<script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/1.4.1/p5.min.js"></script>
<!-- and other stuff-->
<button class="continueButton" id="btn3" value="blah"> Blah</button>
<!-- and other stuff-->
</html>
jQuery.js
$("#btn3").click(function(){
$("#contentbox3").load("graphic2.html");
$.getScript("animatebug.js");//a p5 animation
});
graphic2.html
<div id="p5canvas"></div>
animatebug.js
function setup(){
createCanvas(400, 400);
background(200,100,0);
img = loadImage("images/bug_small.gif");
const myCanvas = createCanvas(400, 400);
myCanvas.parent('p5canvas');
image(img, 0, 0);
}
function draw(){
background(200,100,0);
image(img, 100, 100);
}
这里的执行顺序非常重要,这也是问题所在。 header 中的 p5 脚本正在寻找 setup()
函数,以便在您尚未加载 <div id="p5canvas"/>
目标元素或包含 animatebug.js
文件时调用功能。
您需要确保这两个事件都发生了 -- html 加载和脚本加载 -- 然后您可以正确执行脚本。
您可以使用 p5 instance mode.
控制何时调用 p5 函数const animateBug = function(p) {
let img;
p.setup = function() {
const myCanvas = p.createCanvas(400, 400);
p.background(200, 100, 0);
img = p.loadImage("https://www.gravatar.com/avatar/ddffc30b6adba9c402d2f6d8902c47fb?s=64&d=identicon&r=PG&f=1");
myCanvas.parent('p5canvas');
p.image(img, 0, 0);
}
p.draw = function() {
p.background(200, 100, 0);
p.image(img, 100, 100);
}
}
然后你通过调用
来执行这个new p5(animateBug);
您很可能想在 jQuery 中调用 new p5(animateBug);
,这样您就可以确保 load()
和 getScript()
都先完成。但我不是 jQuery 专业人士,所以我无法在这方面帮助您。