@yanieniz

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

const menuWrapper = document.querySelector('.portfolio-menu'),
menuElems = menuWrapper.querySelectorAll('li'),
allButton = menuWrapper.querySelector('.all'),
loveButton = menuWrapper.querySelector('.lovers'),
chefButton = menuWrapper.querySelector('.chef'),
girlButton = menuWrapper.querySelector('.girl'),
guyButton = menuWrapper.querySelector('.guy'),
grandmotherButton = menuWrapper.querySelector('.grandmother'),
grandfatherButton = menuWrapper.querySelector('.granddad');
  • Вопрос задан
  • 341 просмотр
Пригласить эксперта
Ответы на вопрос 7
sergiks
@sergiks Куратор тега JavaScript
♬♬
Если бы был порядок и полное совпадение имен переменных и классов, можно часть сократить так:
const buttons = {};
'all,love,chef,girl,boy,grandma,grandpa'
  .split(',').forEach((name) => buttons[name] = menuWrapper.querySelector('.' + name));
Использовать потом, например, вместо girlButtonbuttons.girl
Ответ написан
BorLaze
@BorLaze
Java developer
Никак.
Тебе нужны разные сущности по разным критериям.

Сколько вариантов - столько и запросов. Что тут сокращать?
Ответ написан
WblCHA
@WblCHA
const menuQuerySelector = (selectors) => selectors.map((s) => menuWrapper.querySelector(s));
  
  const buttonSelectors = ['.b1', '.b2', '.b3', '.b4', ...];
  const [button1, button2, button3, button4, ...] = menuQuerySelector(buttonSelectors);
Ответ написан
edward_freedom
@edward_freedom
let objects = {
        allButton: {
            wrapper: 'menuWrapper',
            selector: 'li',
            'function': 'querySelectorAll'
        },
        loveButton : {
            wrapper: 'menuWrapper',
            selector: '.lovers',
            'function': 'querySelector'
        },
    };

    Object.entries(objects).forEach(entry => {
        const [key, value] = entry;
        const wrapper = document.querySelector(value.wrapper);
        value.object = wrapper[value.function](value.selector);
    });
Ответ написан
profesor08
@profesor08 Куратор тега JavaScript
Как по мне код должен быть простым и читабельным. Много переменных именно так и выглядят.

const menuWrapper = document.querySelector(".portfolio-menu");

if (menuWrapper !== null) {
  const [all, lovers, chef, girl, guy, grandmother, granddad] = [
    ".all",
    ".lovers",
    ".chef",
    ".girl",
    ".guy",
    ".grandmother",
    ".granddad",
  ].map((selector) => {
    return menuWrapper.querySelector(selector);
  });

  const menuElems = menuWrapper.querySelectorAll("li");
}
Ответ написан
Добавить функцию, например:
function _(x) {return document.querySelector(x); }
И сразу вставлять в код типа:
_('.a').style.color = 'red';

Короче не придумать, так как тут нет чего-то общего, что можно заменить.
Ответ написан
Ваш ответ на вопрос

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

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