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

Question

Роберт Плант @o058oo

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

JavaScript

Как сократить код 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');
		});
	}

Вопрос задан более трёх лет назад
151 просмотр

4 комментария

Подписаться 1 Простой 4 комментария

iBird Rose @iiiBird

ну раз костыляешь - то оберни свой forEach в еще один цикл, в котором и будут эти индексы прогоняться. а в value вставляй переменной. типа .value${i}

Написано более трёх лет назад
WbICHA @WblCHA
Василий Банников, Daniil Vasilyev,
Господа, может я упоролся, но разве эта всратая конструкция:

document.querySelectorAll(`.value1 [class^=line]`).forEach(div => { document.querySelector(`.value1 .${div.className}`).classList.add('visible'); });

не равнозначна этой?

document.querySelectorAll(`.value1 [class^=line]`).forEach(div => { div.classList.add('visible'); });

ТС же ищет то, что уже нашёл, разве нет?
Написано более трёх лет назад
Василий Банников @vabka

WbICHA, мне тоже так показалось. Но тк я не уверен, что лежит в className - не стал переделывать.

Написано более трёх лет назад
WbICHA @WblCHA

Василий Банников, дык там неважно, что лежит, конструкция ТСа найдёт ту же ноду, что у него есть, там нету опция найти чт-то другое.

Написано более трёх лет назад

ну раз костыляешь - то оберни свой forEach в еще один цикл, в котором и будут эти индексы прогоняться. а в value вставляй переменной. типа .value${i}
Василий Банников, Daniil Vasilyev,
Господа, может я упоролся, но разве эта всратая конструкция:

document.querySelectorAll(`.value1 [class^=line]`).forEach(div => { document.querySelector(`.value1 .${div.className}`).classList.add('visible'); });

не равнозначна этой?

document.querySelectorAll(`.value1 [class^=line]`).forEach(div => { div.classList.add('visible'); });

ТС же ищет то, что уже нашёл, разве нет?
WbICHA, мне тоже так показалось. Но тк я не уверен, что лежит в className - не стал переделывать.
Василий Банников, дык там неважно, что лежит, конструкция ТСа найдёт ту же ноду, что у него есть, там нету опция найти чт-то другое.

Answer 1 · 2021-02-23 20:31:40

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');
    });
}

Но вообще код странный

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

Войдите на сайт