@winers
Начинающий программист

Как объединить несколько функций JS?

var bg = document.getElementById('bb');
          document.getElementById('gg').addEventListener("mouseover",
          function(){bg.style.width = 50 + "%", bg.style.height = 50 + "%";
          this.addEventListener("mouseout", function(){bg.style.width = "" , bg.style.height = "";});
});

var bh = document.getElementById('qq');
          document.getElementById('zz').addEventListener("mouseover", function(){bh.style.width = 50 + "%";this.addEventListener("mouseout", function(){bh.style.width = "";});
});

есть две функции которые срабатывают отдельно друг от друга при наведении на разные элементы, как объединить функции в одну?
чтобы при наведении на один элемент срабатывало одновременно несколько функций?
привязать к одной кнопке (n) функций одновременно?
  • Вопрос задан
  • 597 просмотров
Решения вопроса 1
@winers Автор вопроса
Начинающий программист
var bg = document.getElementById('bb');
         document.getElementById('gg').addEventListener("mouseover",
         function(){bg.style.width = 50 + "%", bg.style.height = 50 + "%";
          this.addEventListener("mouseout", function(){bg.style.width = "" , bg.style.height = "";});

});

var bh =  document.getElementById('qq');
          document.getElementById('gg').addEventListener("mouseover",
           function(){bh.style.width = 50 + "%", bh.style.height = 50 + "%";
           this.addEventListener("mouseout", function(){bh.style.width = "" , bh.style.height = "" ;});
});

var bj =  document.getElementById('ee');
          document.getElementById('gg').addEventListener("mouseover",
           function(){bj.style.width = 50 + "%", bj.style.height = 50 + "%";
           this.addEventListener("mouseout", function(){bj.style.width = "" , bj.style.height = "" ;});
});

var bk =  document.getElementById('ww');
          document.getElementById('gg').addEventListener("mouseover",
           function(){bk.style.width = 50 + "%", bk.style.height = 50 + "%";
           this.addEventListener("mouseout", function(){bk.style.width = "" , bk.style.height = "" ;});
});

добился желаемого эффекта созданием переменной на каждый изменяемый объект, с указанием id желаемой кнопки.
Ответ написан
Комментировать
Пригласить эксперта
Ответы на вопрос 1
sergiks
@sergiks Куратор тега JavaScript
♬♬
Исходный код можно примерно так отрефакторить. Вынести в аргументы то, что меняется:
function addBehavior(idFrom, idTo, isChangingHeight) {
  const elFrom = document.getElementById(idFrom);
  const elTo = document.getElementById(idTo);
  
  const onOut = () => {
    elTo.style.width = "";
    isChangingHeight  &&  elTo.style.height = "";
//    elFrom.removeEventListener(onOut);
  }
  
  const onOver = () => {
    elTo.style.width = "50%";
    isChangingHeight  &&  elTo.style.height = "50%";
//     elFrom.removeEventListener(onOver);
  }
  
  elFrom.addEventListener("mouseover", onOver);  
  elFrom.addEventListener("mouseout", onOut);
}

addBehavior('gg', 'bg', true);
addBehavior('zz', 'qq');

Но в целом подход к решению задачи, наверняка, не самый лучший. Если бы вы более подробно описали проблему и привели разметку, тут предложили бы решение получше.
Ответ написан
Комментировать
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы