Блог

Главная - Вопросы по программированию - Избегайте повторения

Избегайте повторения

#javascript

Вопрос:

Я уверен, что есть способ написать более короткую версию следующего js-кода. В конце концов, я просто повторяюсь снова и снова. Есть какие-нибудь предложения?

Большое спасибо!

 if (designVal == 0 amp;amp; colorVal == 0) {
    design01yellow.style.display = "block";
    design01black.style.display = "none";
    design01blue.style.display = "none";
    design01grey.style.display = "none";
    design02yellow.style.display = "none";
    design02black.style.display = "none";
    design02blue.style.display = "none";
    design02grey.style.display = "none";
    design03yellow.style.display = "none";
    design03black.style.display = "none";
    design03blue.style.display = "none";
    design03grey.style.display = "none";
} else if (designVal == 0 amp;amp; colorVal == 1) {
    design01yellow.style.display = "none";
    design01black.style.display = "block";
    design01blue.style.display = "none";
    design01grey.style.display = "none";
    design02yellow.style.display = "none";
    design02black.style.display = "none";
    design02blue.style.display = "none";
    design02grey.style.display = "none";
    design03yellow.style.display = "none";
    design03black.style.display = "none";
    design03blue.style.display = "none";
    design03grey.style.display = "none";
} else if (designVal == 0 amp;amp; colorVal == 2) {
    design01yellow.style.display = "none";
    design01black.style.display = "none";
    design01blue.style.display = "block";
    design01grey.style.display = "none";
    design02yellow.style.display = "none";
    design02black.style.display = "none";
    design02blue.style.display = "none";
    design02grey.style.display = "none";
    design03yellow.style.display = "none";
    design03black.style.display = "none";
    design03blue.style.display = "none";
    design03grey.style.display = "none";
} else if 
///AND SO ON

Комментарии:

1. создание данных на основе файлов json

2. Я бы поместил класс типа «желтый» «синий» на какой-нибудь родительский элемент, а затем CSS все остальное.

3. Вы могли бы просто нормализовать все до «нет», а затем изменить только то, которое вы хотите установить на «блокировать»?

Ответ №1:

Дайте всем элементам общий класс (например class="design" ). Пройдите по ним, установив для них все значения none , а затем установите для конкретного элемента значение block .

 document.querySelectorAll(".design").forEach(el => el.style.display = "none");
if (designVal == 0 amp;amp; colorVal == 0) {
    design01yellow.style.display = "block";
} else if (designVal == 0 amp;amp; colorVal == 1) {
    design01black.style.display = "block";
} ...

Ответ №2:

Я бы нормализовал их до «отображение: нет», а затем установил только тот, который вы хотите display: block .

 if (designVal === 0) {
  design01yellow.style.display = "none";
  design01black.style.display = "none";
  design01blue.style.display = "none";
  design01grey.style.display = "none";
  design02yellow.style.display = "none";
  design02black.style.display = "none";
  design02blue.style.display = "none";
  design02grey.style.display = "none";
  design03yellow.style.display = "none";
  design03black.style.display = "none";
  design03blue.style.display = "none";
  design03grey.style.display = "none";

  if(colorVal === 0) {
    design01yellow.style.display = "block";
  } else if (colorVal === 1) {
    design01black.style.display = "block";
  } else if (colorVal === 2) {
    design01blue.style.display = "block";
  }

  // and so on
}
Метки: