o058oo
@o058oo
Кофе, код и рок-н-ролл!

Как сократить код JS?

Имеются классы value1, value2, value3 ... value100500. Меняется только цифра у value.
Как сократить код?
function ready() {
		document.querySelectorAll(`.value1 [class^=line]`).forEach(div => {
			document.querySelector(`.value1 .${div.className}`).classList.add('visible');
		});
		document.querySelectorAll(`.value2 [class^=line]`).forEach(div => {
			document.querySelector(`.value2 .${div.className}`).classList.add('visible');
		});
		document.querySelectorAll(`.value3 [class^=line]`).forEach(div => {
			document.querySelector(`.value3 .${div.className}`).classList.add('visible');
		});
		document.querySelectorAll(`.value4 [class^=line]`).forEach(div => {
			document.querySelector(`.value4 .${div.className}`).classList.add('visible');
		});
		document.querySelectorAll(`.value5 [class^=line]`).forEach(div => {
			document.querySelector(`.value5 .${div.className}`).classList.add('visible');
		});
		document.querySelectorAll(`.value6 [class^=line]`).forEach(div => {
			document.querySelector(`.value6 .${div.className}`).classList.add('visible');
		});
		document.querySelectorAll(`.value7 [class^=line]`).forEach(div => {
			document.querySelector(`.value7 .${div.className}`).classList.add('visible');
		});
	}
  • Вопрос задан
  • 109 просмотров
Решения вопроса 3
@vabka
Токсичный
function ready() {
  for(let i = 1; i <= 7; i++) {
    makeVisible("value" + i);
  }
}
function makeVisible(selector) {
    document.querySelectorAll('.'+selector+" [class^=line]").forEach(div => {
      document.querySelector(`.${selector} .${div.className}`).classList.add('visible');
    });
}

Но вообще код странный
Ответ написан
@hello_my_name_is_dany
Backend Developer (Node.js, PHP, C#)
for (let i = 1; i <= 7; i++ ) {
  document.querySelectorAll(`.value${i} [class^=line]`).forEach(div => {
    document.querySelector(`.value${i} .${div.className}`).classList.add('visible');
  });
}
Ответ написан
Tim-A-2020
@Tim-A-2020 Куратор тега JavaScript
Слишком мало информации. Не понятно, что вы пытаетесь сделать. Лучше конечно залить демку и объяснить. Я не понимаю зачем нужно использовать столько циклов. Если добавление класса зависит от родителя , то можно примерно так сократить:
document.querySelectorAll(`[class^=line]`).forEach((item, i) => {
   const parent = item.closest(`.value${i + 1}`);
   if (i < 7 && parent) {
     item.classList.add('visible');
   }
 })

Опять таки может быть много подводных камней. Поэтому лучше описать более подробно
Ответ написан
Пригласить эксперта
Ваш ответ на вопрос

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

Войти через центр авторизации
Похожие вопросы
Artezio Нижний Новгород
от 130 000 до 180 000 ₽
Artezio Москва
от 160 000 до 220 000 ₽
XPOWER Одесса
от 3 000 до 5 500 $