Question

我正在尝试使用p5.js（实例化模式）在鼠标悬停时将布朗运动应用于HTML <li class="menu-item">。

我可以使用

创建所有项目的数组

var menuItem = document.getElementsByClassName("menu-item");

我可以看到每个菜单项console.log(menuItem[0]);

现在，我想改变鼠标上每个菜单的行为。所以，我有一个改变功能：

function change() {
   console.log('changing');
}

尝试在鼠标上调用它：

menuItem[0].mouseOver(change); // e[0].mouseOver is not a function

和

menuItem[0].p.mouseOver(change); // Cannot read property 'mouseOver' of undefined

第一个示例返回“不是函数”，因为必须以这种方式访问实例化模式中的全局函数：p.mouseOver。

但是，第二个示例返回“无法读取未定义的属性'mouseOver'”

这样做的正确方法是什么？谢谢。

这是整个脚本：

var sketch = function(p) {
  function change() {
    console.log('changing');
  }
  p.setup = function(){
    var menuItem = document.getElementsByClassName("menu-item");
    menuItem[0].p.mouseOver(change);
    console.log(menuItem[0]);
  };
};
new p5(sketch);

Answer 1

这适用于某个项目。必须选择项目作为p5对象。

p.setup = function(){
  var convoca = p.select(".itemclass");
  convoca.mouseOver(change);
};

Answer 2

进入html并写入DOM元素：

<li class="menu-item" onHover="change()"></li>

这将在悬停时执行更改。

Answer 3

我假设使用p5.js你也使用p5.dom.js（或p5.min.dom.js）。

所以你调用了DOM函数document.getElementsByClassName("menu-item")，它确实提供了所有菜单项，但是作为DOM API的DOM对象（不是p5.dom API）。

p5.dom API（与p5.js一起使用）有一个名为select()和selectAll()的特殊函数（select和{{3}的文档条目}）

因此，您不是使用document.getElementsByClassName("menu-item")而是使用selectAll("menu-item")来获取p5.dom API的所有菜单项。

（或者您可以在DOM函数上添加本机事件侦听器，但是p5.dom API将无法使用...请参阅事件侦听器selectAll）

现在这样做你应该可以在每个对象上调用mouseOver()并让它工作但是这样做，你附加到对象的每个函数都不会知道它附加到的对象。

假设我们将项目存储在menuItems并调用了menuItems[0].mouseOver(change)，我发现你所做的change函数无法分辨它附加到哪个menuItems对象。

因此，例如，如果函数change想要更改该特定对象的颜色，我们就不能说：

for(var i in menuItems) {
    menuItems[i].mouseOver(change)
}
function change() {
    menuItems[i].style('color', 'red')
}

因为在函数更改中，变量i不存在！

为了解决这个问题，我还提出了一个简单的lamda函数，它接受当前的menuItem，因此它知道要改变什么，并返回mouseOver可以调用的函数！

for(var i in menuItems) {
    menuItems[i].mouseOver(change(menuItems[i]))
}

function change(target) {
    returnFunction = function(event) {
        target.style('color', 'red');
    }

    return returnFunction;
}

这是合法的，因为mouseOver期望调用一个函数。我们在mouseOver中调用了一个函数，它返回一个值returnFunction，但返回值的类型是一个函数，所以最后在mouseOver内有一个函数！

下面的花哨例子

＆＃13;

//p5.js starts here!

function setup() {
  //these stop p5.js from looping and making a canvas
  noCanvas();
  noLoop();
  
  //selects all menu-items
  var allMenuItems = selectAll('.menu-item'); //note that you need to call the p5.dom function "select" or "selectAll" instead of the DOM function "getElementsByClassName"
  
  //iterate through all menu items
  for(var iteration in allMenuItems) {
    menuItem = allMenuItems[iteration];
    
    //at this moment it would be cool to call "mouseOver(change)" but then the function would never know which element called it so istead let's use a lamda function!
    menuItem.mouseOver(over(menuItem));//over is a lamda function which takes the current menu item and allows the function to interact with it
    //over is made below
  }
}

//function "over" that we made will take the menu item we are assigning the event to and allow us to change that same menu item
function over(target) {//fancy target variable knows which object it is set to!

  //this function changes the color of the object on mouse over
  var returnFunction = function(event) {
  
    //as this is a lamda function, the target variable seen above can be see here!
    target.style('color', color(random(0,255),random(0,255),random(0,255)));//change the target menuItem to a random color
  }
  
  //returns the function we made for the mouse over event to use, 
  return returnFunction;
}

＆＃13;

<!-- Import p5.js to this snippet -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/0.5.16/p5.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/0.5.16/addons/p5.dom.min.js"></script>
<!-- Arbitrary number of list items in a list -->
<ul>
<li><p class="menu-item"> list item 1</p></li>
<li><p class="menu-item"> list item 2</p></li>
<li><p class="menu-item"> list item 3</p></li>
<li><p class="menu-item"> list item 4</p></li>
<li><p class="menu-item"> list item 5</p></li>
<li><p class="menu-item"> list item 6</p></li>
<li><p class="menu-item"> list item 7</p></li>
<li><p class="menu-item"> list item 8</p></li>
<li><p class="menu-item"> list item 9</p></li>
<li><p class="menu-item"> list item 10</p></li>
<li><p class="menu-item"> list item 11</p></li>
<li><p class="menu-item"> list item 12</p></li>
<li><p class="menu-item"> list item 13</p></li>
<li><p class="menu-item"> list item 14</p></li>
<li><p class="menu-item"> list item 15</p></li>
</ul>

＆＃13;

希望这有帮助！

使用p5.js

3 个答案: