Можно ли реорганизовать манипуляцию DOM ванили JS

Question

Мне интересно, возможно ли реорганизовать следующий код чистым и приятным способом, чтобы избежать повторения при каждом утверждении is:

if (statement) {
    menu.style.display = "inline-block";
    emoji.style.display = "inline-block";
    del.style.display = "block";
    upload.style.display = "block";
} else if (statement) {
    menu.style.display = "none";
    emoji.style.display = "inline-block";
    del.style.display = "none";
    upload.style.display = "none";
} else {
    menu.style.display = "none";
    emoji.style.display = "none";
    del.style.display = "none";
    upload.style.display = "none";
}

Я знаю, что могу выполнять деструктуризацию объектов, но я также хочу уменьшить количество строк, потому что этот код повторяется много раз в моем коде.

Answer 1

Один из вариантов - создать массив элементов и установить для всех их стилей значение none независимо, а затем внутри условий задать стили, которые не будут none:

[menu, emoji, del, upload].forEach(elm => elm.style.display = "none");
if (statement) {
  menu.style.display = "inline-block";
  emoji.style.display = "inline-block";
} else if (statement) {
  emoji.style.display = "inline-block";
}

Если у вас часто есть несколько элементов, стиль которых вы хотите изменить, рассмотрите функцию:

const setAllDisplays = (display, ...elms) => elms.forEach(elm => elm.style.display = display);
setAllDisplays('none', menu, emoji, del, upload);
if (statement) {
  setAllDisplays("inline-block", menu, emoji);
} else if (statement) {
  emoji.style.display = "inline-block";
}

Answer 2

Вы можете поддерживать объект с требуемыми состояниями для каждой цели, получать индекс и обновлять цели.

var display = {
        menu: ["inline-block", "none", "none"],
        emoji: ["inline-block", "inline-block", "none"],
        del: ["block", "none", "none"],
        upload: ["block", "none", "none"],
        reference: { menu, emoji, del, upload }
    },
    index = statement ? 0 : statement ? 1 : 2;

Object.keys(display).forEach(k => reference[k].stype.display = display[k][index]);

Answer 3

Я бы рекомендовал сделать это так:

container.classList.remove("one", "two", "three");
if (expression) {
    container.classList.add("one");
} else if (expression) {
    container.classList.add("two");
} else {
    container.classList.add("three");
}

... внутри многократно используемой функции, где container - ближайший элемент, содержащий menu, emoji, del и upload (в худшем случае это body). Затем стилизуйте отдельные элементы с помощью CSS, например:

.one menu {
    display: inline-block;
}
.two menu, .three menu {
    display: none;
}

Очевидно, что вместо "one", "two" и "three" вы будете использовать имена, отражающие состояние.

---

В зависимости от выражений вы можете использовать этот код вместо if / else if / else выше:

container.classList.toggle("one", expression);
container.classList.toggle("two", expression);
container.classList.toggle("three", expression);

Answer 4

"... потому что у меня этот код повторяется много раз в моем коде."

Так что просто превратите его в функцию и сохраните в точности так, как сейчас:

function(condition1, condition2, menu, emoji, del, upload){
  if (condition1) {
    menu.style.display = "inline-block";
    emoji.style.display = "inline-block";
    del.style.display = "block";
    upload.style.display = "block";
  } else if (condition2) {
    menu.style.display = "none";
    emoji.style.display = "inline-block";
    del.style.display = "none";
    upload.style.display = "none";
  } else {
    menu.style.display = "none";
    emoji.style.display = "none";
    del.style.display = "none";
    upload.style.display = "none";
  }
}

Тогда вы можете просто вызвать функцию из любого места с любым условием1 и условием2