[英]Passing an argument to a function inside a forEach.call
i am trying to understand how i would pass an argument to a function inside a forEach.call
. 我试图了解如何将参数传递给
forEach.call
内部的forEach.call
。 I basically converted my code into an object literal and split up the functions to be more dry when i would later add more animations. 我基本上将代码转换为对象文字,并在以后添加更多动画时将功能拆分为更干燥。
The problem is, that it logs the element on load but not anymore after that, i guess its because the variable doesn't exist after the first log anymore. 问题是,它在加载时记录了元素,但此后不再记录,因为它在第一次记录后就不存在了,所以我猜是这样。 how would i make it work, or is the approach completely wrong and nonsense?
我将如何使其工作,或者这种方法是完全错误和无稽之谈?
working example: https://codepen.io/HendrikEng/pen/aEKPmM?editors=1010 工作示例: https : //codepen.io/HendrikEng/pen/aEKPmM?editors=1010
my failing dry attempt: https://codepen.io/HendrikEng/pen/XVBpPV?editors=0011 我失败的尝试失败: https : //codepen.io/HendrikEng/pen/XVBpPV?editors=0011
const who = {
trigger: [...document.getElementsByClassName('slide')],
init: () => {
console.log('init');
who.trigger.forEach.call(who.trigger, (el) => {
el.addEventListener('mouseover', who.animateOver(el), false);
});
who.trigger.forEach.call(who.trigger, (el) => {
el.addEventListener('mouseout', who.animateOut(el), false);
});
},
animateOver: (el) => {
console.log('animateOver');
console.log(el);
// animate image
const image = el.getElementsByClassName("img")[0];
TweenMax.to(image, 0.25, {
yPercent: 35,
ease: Power1.easeOut,
});
},
animateOut: (el) => {
console.log(el);
console.log('animateOut');
const image = el.getElementsByClassName('img')[0];
TweenMax.to(image, 0.75, {
yPercent: 0,
ease: Bounce.easeOut,
});
},
debug: () => {
console.log('debug');
},
destroy() {
console.log('destroy');
},
};
who.init();
The code at Question calls the functions set at .addEventListener()
instead of referencing the function to call when the event is dispatched. Question上的代码调用在
.addEventListener()
处设置的函数,而不是在调度事件时引用要调用的函数。 Also, the event is attached to the <img>
element, .getElementsByClassName()
call is not necessary 同样,事件被附加到
<img>
元素,不需要.getElementsByClassName()
调用
const who = {
trigger: [...document.getElementsByClassName('slide')],
init: () => {
console.log('init');
who.trigger.forEach.call(who.trigger, (el) => {
el.addEventListener('mouseover', who.animateOver, false);
});
who.trigger.forEach.call(who.trigger, (el) => {
el.addEventListener('mouseout', who.animateOut, false);
});
},
animateOver: (el) => {
console.log('animateOver');
console.log(el);
// animate image
const image = el.target;
console.log(image);
TweenMax.to(image, 0.25, {
transformStyle: 'preserve-3d',
yPercent: 35,
ease: Power1.easeOut,
});
},
animateOut: (el) => {
console.log(el);
console.log('animateOut');
const image = el.target;
TweenMax.to(image, 0.75, {
yPercent: 0,
ease: Bounce.easeOut,
});
},
debug: () => {
console.log('debug');
},
destroy() {
console.log('destroy');
},
};
onload = () => who.init();
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.