循环创建P5实例时，传入$(this)上下文出现undefined问题求助

嘿，我懂你的困扰！你遇到的核心问题是P5的sketch函数不支持自定义额外参数——当你调用new p5(playerVisualizer, context)时，P5只会把自身实例（也就是你写的p）传递给playerVisualizer函数，你额外加的context参数根本不会被传入，所以才会一直是undefined。

给你两个简单可行的解决方案：

方案1：利用闭包保留上下文 #

在循环内部定义sketch函数，这样就能通过闭包直接访问当前的context变量：

const playerVisualizersP5 = [];

$('.player_visualizer').each(function (i) {
  const context = $(this);
  // 循环内定义sketch，闭包捕获当前context
  playerVisualizersP5[i] = new p5(function(p) {
    p.setup = function() {
      console.log(context); // 这里能拿到正确的jQuery元素上下文
      // 把画布挂载到目标元素里（需要转成DOM对象）
      const canvas = p.createCanvas(300, 100);
      canvas.parent(context[0]);
    };

    p.draw = function() {
      // 在这里使用context做你需要的操作
      p.background(220);
      p.text(`绑定到元素: ${context.attr('id')}`, 10, 20);
    };
  }, context[0]); // 第二个参数直接传DOM元素（this就是当前DOM节点）
});

方案2：直接给P5实例附加上下文属性 #

如果你想把sketch函数抽离出来单独定义，可以在创建P5实例后，直接把context绑定到实例上：

const playerVisualizersP5 = [];

// 单独定义sketch函数
let playerVisualizer = function(p) {
  p.setup = function() {
    console.log(p.context); // 现在能拿到正确的上下文了
    const canvas = p.createCanvas(300, 100);
    canvas.parent(p.context[0]);
  };

  p.draw = function() {
    p.background(150);
    p.text(`上下文元素类名: ${p.context.attr('class')}`, 10, 20);
  };
};

// 循环创建实例并绑定上下文
$('.player_visualizer').each(function (i) {
  const context = $(this);
  const p5Instance = new p5(playerVisualizer, context[0]);
  p5Instance.context = context; // 把jQuery上下文附加到P5实例上
});

这两种方法都能解决你无法传递上下文的问题，选哪种取决于你代码的组织习惯~

内容的提问来源于stack exchange，提问作者Sumner Erhard