Как можно сократить код?

Только изучаю js, вот думаю это кривой код, душа кричит чувствует, но мозгов не хватает это исправить. Как грамотно можно сократить этот код и при этом что бы он был читабелен.

let figures__hover_1 = document.querySelector('.figures__hover-1');
    let figures__hover_2 = document.querySelector('.figures__hover-2');
    let figures__hover_3 = document.querySelector('.figures__hover-3');


    document.querySelector('.what-we-do__li-1').addEventListener("mouseover", function () {
        figures__hover_1.style.top = "100px";
        figures__hover_2.style.top = "-100px";
        figures__hover_3.style.top = "200px";

        figures__hover_1.style.transition = "0.5s";
        figures__hover_2.style.transition = "0.5s";
        figures__hover_3.style.transition = "0.5s";

        this.addEventListener("mouseout", function () {
            figures__hover_1.style.top = "0px";
            figures__hover_2.style.top = "0px";
            figures__hover_3.style.top = "190px";
        });
    });
    document.querySelector('.what-we-do__li-2').addEventListener("mouseover", function () {
        figures__hover_1.style.top = "200px";
        figures__hover_2.style.top = "0px";
        figures__hover_3.style.top = "-100px";

        figures__hover_1.style.transition = "0.5s";
        figures__hover_2.style.transition = "0.5s";
        figures__hover_3.style.transition = "0.5s";

        this.addEventListener("mouseout", function () {
            figures__hover_1.style.top = "0px";
            figures__hover_2.style.top = "0px";
            figures__hover_3.style.top = "190px";
        });
    });

// и так далее, таких блоков у меня восемь штук...
  • Вопрос задан
  • 136 просмотров
Решения вопроса 2
WblCHA
@WblCHA
figures__hover_1.style.transition = "0.5s";
figures__hover_2.style.transition = "0.5s";
figures__hover_3.style.transition = "0.5s";

Во-первых, вот это сразу в цсс перенести, поскольку транзишн вы всё равно не отменяете.

document.querySelector('.what-we-do__li-1').addEventListener("mouseover", function () {
        figures__hover_1.style.top = "100px";
        figures__hover_2.style.top = "-100px";
        figures__hover_3.style.top = "200px";

        this.addEventListener("mouseout", function () {
            figures__hover_1.style.top = "0px";
            figures__hover_2.style.top = "0px";
            figures__hover_3.style.top = "190px";
        });
    });

Во-вторых, вот этот вот блок спокойно выносится в функцию, однако по этим 2ум я могу представить только ещё 1 блок, а у вас там их 8, так что хотелось бы увидеть их.

В-третьих, код из предыдущего пункта, мягко говоря, ужасен, потому что он добавляет ещё один mouseout каждый раз при срабатывании mouseout. А сотня mouseout на одном элементе... Думаю, ты понял.
Ответ написан
Aetae
@Aetae
Тлен
Во-первых: так
element.addEventListener("mouseover", function () {
  ...
  this.addEventListener("mouseout", function () { ... });
});
делать нельзя никогда. Это, простите - говно.
Каждый раз как на элемент наводится мышка - на него вешается новый обработчик mouseout. 10 раз навели - 10 обработчиков висит и срабатывает по уводу мышки.

Во-вторых: это максимально всё выносится в css. Если .figures__hover где-то ниже .what-we-do__li - полностью, иначе частично: в обработчике меняется только класс контейнера.

В-третьих: лучше использовать mouseenter и mouseleave.
Ответ написан
Пригласить эксперта
Ваш ответ на вопрос

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

Войти через центр авторизации
Похожие вопросы
Artezio Нижний Новгород
от 130 000 до 180 000 ₽
Artezio Москва
от 160 000 до 220 000 ₽
Sportrecs Москва
от 150 000 до 200 000 ₽
25 нояб. 2020, в 19:58
35000 руб./за проект
25 нояб. 2020, в 19:13
1000 руб./в час
25 нояб. 2020, в 18:34
100000 руб./за проект