Передача аргумента в функцию внутри forEach.call

Question

Передача аргумента в функцию внутри forEach.call

1

Я пытаюсь понять, как передать аргумент функции внутри 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();

HendrikEng 14 янв. 2018, в 22:16

Источник

Теги:

javascript

ecmascript-6

object

foreach

1 ответ

Ещё вопросы

guest271314 · Accepted Answer · 2018-01-14T18-00-00.000Z

Код в вопросе вызывает функции, установленные в .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();

Большое спасибо за подробный ответ, который действительно помог :-)