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

Question

[Вика Мармеладка]

Только изучаю 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";
        });
    });

// и так далее, таких блоков у меня восемь штук...

Comments

[Александр]

а как вы собираетесь сокращать код?
я понимаю, если бы значения везде были одинаковые, но для 80% элементов вы задаёте разные значения
смысл что-то делать?

[Вика Мармеладка]

Александр, то есть вы хотите сказать что в принципе не плохо?

[tema_sun]

Здесь вообще js не нужен. Это все через :hover в CSS делается.

[Александр]

Рич Пиана, ИМХО - да.
конечно, можно немного сократить код с помощью функций, но зачем делать велосипед? просто расставьте везде соответствующие комментарии, если вам сложно ориентироваться в нём, да и живите спокойно.

[Вика Мармеладка]

tema_sun, неее, в этом проекте реализовать это можно только через js, поверьте с css и html у меня проблем нет

[Lynn «Кофеман»]

Я подозреваю что почти весь этот код надо выкинуть и написать правильный CSS. Но без работающего прототипа сложно сказать что именно надо написать

[Вика Мармеладка]

Lynn «Кофеман», неее, в этом проекте реализовать это можно только через js, поверьте с css и html у меня проблем нет

[WbICHA]

Александр, издеваетесь? У автора при каждом наведении на элемент добавляется новый эвент, в каком месте это нормальный код? Технически он работает, но этого лучше он не стал. Да и DRY тут не выполняется чуть более, чем полностью.

Рич Пиана, то есть даже цсс через жс не добавить?

Answer 1

[WbICHA]

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 на одном элементе... Думаю, ты понял.

Comments

[Вика Мармеладка]

Понял. Спасибо за профессиональный разбор! :)

Answer 2

[Aetae]

Во-первых: так

element.addEventListener("mouseover", function () {
  ...
  this.addEventListener("mouseout", function () { ... });
});

делать нельзя никогда. Это, простите - говно.
Каждый раз как на элемент наводится мышка - на него вешается новый обработчик mouseout. 10 раз навели - 10 обработчиков висит и срабатывает по уводу мышки.

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

В-третьих: лучше использовать mouseenter и mouseleave.

Comments

[Вика Мармеладка]

в таком случае какой есть выход?

[Aetae]

Рич Пиана, очевидный:

element.addEventListener("mouseover", function () { ... });
element.addEventListener("mouseout", function () { ... });

[Вика Мармеладка]

Aetae, действительно, благодарю! А почему mouseenter и mouseleave, того что я использовал, плюс к производительности?

[Aetae]

Рич Пиана, https://learn.javascript.ru/mousemove-mouseover-mo...
Если коротко: если внутри '.what-we-do__li-1' будут другие элементы, то при наведении на них будет срабатывать mouseout, а потом всплывать mouseover потомка. Т.е. будет "дрыгаться". mouseenter\mouseleave учитывает только тот элемент на котором висят и не зависят от потомков.