将 $(this) 传递给新的 P5 实例是未定义的

Question

在下面的代码中，我遍历每个 "player_visualizer" 元素并尝试为每个元素创建一个新的 P5 实例。

如果我 console.log(context) 在循环中，我将获得该特定元素的上下文，这正是我所需要的。

$('.player_visualizer').each(function (i) {

  context = $(this);

  playerVisualizersP5[i] = new p5(playerVisualizer, context);

});

但是，我遇到的问题是将该特定元素的上下文传递给将处理所有 P5 动画的函数。

例如，当我尝试将该上下文变量传递给下面的函数并执行 console.log(p.context) 时，上下文变量始终为 undefined.

 let playerVisualizer = function (p, context) {

      p.context = context;

 }

我已经对我可以做些什么进行了大量研究，但我似乎无法将其与我的特定情况联系起来。我已将研究范围缩小到以下一些资源。

http://hugoware.net/blog/passing-context-with-javascript

How do I pass the this context to a function?

非常感谢任何帮助或指导。

Answer 1

为什么您认为将某些内容传递给 p5 构造函数会自动将该参数传递给 playerVisualizer 函数？

来自 the P5.js documentation:

One final note: when creating a p5 instance, you can specify a second argument (HTML element id) which acts the parent for all elements created by the sketch. For example, let's say you have:
<body>
  <div id = "p5sketch">
  </div>

  <p>Some other HTML</p>
</body>
You can now say:
var myp5 = new p5(s,'p5sketch');
And all elements will be created inside that div.

这意味着唯一有效的第二个参数是字符串 ID，它被 P5.js 使用但未传递到草图函数中。

为了更好地理解发生了什么，让我们看一下这个例子：

var s = function( sketch ) {
  sketch.setup = function() {
    sketch.createCanvas(200, 200);
  };

  sketch.draw = function() {
        sketch.background(128);
  };
};

var myp5 = new p5(s);

在这个示例草图中，有几点需要理解：

myp5 是 p5 的实例，其中包含 P5.js 函数，如 setup() 和 draw() 以及 background().
s 是一个草图函数，它采用 p5.
sketch 是 p5 的实例，s 可以使用它来访问 P5.js 函数。

也就是说myp5和sketch是同一个对象

这对你很有用，因为如果你想将数据传递到 sketch，你可以将该数据传递到 myp5，像这样：

var s = function( sketch ) {


  sketch.setup = function() {
    sketch.createCanvas(200, 200);
  };

  sketch.draw = function() {
        sketch.background(128);
        sketch.text(sketch.extraThing, 20, 20);
  };
};

var myp5 = new p5(s);
myp5.extraThing = "testing";

将 $(this) 传递给新的 P5 实例是未定义的

Passing $(this) to a new P5 instance is undefined

javascript

jquery

p5.js