我想了解如何将参数传递给 forEach.call
中的函数。我基本上将我的代码转换为对象字面量,并将函数拆分为更枯燥的内容,以便稍后添加更多动画。
问题是,它在加载时记录元素,但之后不再记录,我猜这是因为在第一个记录之后变量不再存在。我该如何让它发挥作用,或者这种方法完全错误且毫无意义?
工作示例: https://codepen.io/HendrikEng/pen/aEKPmM?editors=1010
我失败的尝试: 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();
最佳答案
Question 中的代码调用了 .addEventListener()
中设置的函数而不是在调度事件时引用要调用的函数。此外,该事件附加到 <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();
关于javascript - 将参数传递给 forEach.call 中的函数,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/48253873/