Упростить js скрипт?

Question

[Za Za]

Есть

<script>
document.querySelector('.blocks__item[data-item="screen"]').addEventListener('mouseenter', function() {
		document.querySelector('.blocks__phone-bg').classList.add('blocks__phone-bg--screen');
		document.querySelector('.blocks__phone-bg').className = 'blocks__phone-bg blocks__phone-bg--screen';

		document.querySelector('.blocks__item[data-item="screen"]').classList.add('blocks__item--active');
		document.querySelector('.blocks__item[data-item="goods"]').className = 'blocks__item';
		document.querySelector('.blocks__item[data-item="gallery"]').className = 'blocks__item';
		document.querySelector('.blocks__item[data-item="reviews"]').className = 'blocks__item';
		document.querySelector('.blocks__item[data-item="contacts"]').className = 'blocks__item';
});

document.querySelector('.blocks__item[data-item="goods"]').addEventListener('mouseenter', function() {
		document.querySelector('.blocks__phone-bg').classList.add('blocks__phone-bg--goods');
		document.querySelector('.blocks__phone-bg').className = 'blocks__phone-bg blocks__phone-bg--goods';

		document.querySelector('.blocks__item[data-item="goods"]').classList.add('blocks__item--active');
		document.querySelector('.blocks__item[data-item="screen"]').className = 'blocks__item';
		document.querySelector('.blocks__item[data-item="gallery"]').className = 'blocks__item';
		document.querySelector('.blocks__item[data-item="reviews"]').className = 'blocks__item';
		document.querySelector('.blocks__item[data-item="contacts"]').className = 'blocks__item';
});

document.querySelector('.blocks__item[data-item="gallery"]').addEventListener('mouseenter', function() {
		document.querySelector('.blocks__phone-bg').classList.add('blocks__phone-bg--gallery');
		document.querySelector('.blocks__phone-bg').className = 'blocks__phone-bg blocks__phone-bg--gallery';

		document.querySelector('.blocks__item[data-item="gallery"]').classList.add('blocks__item--active');
		document.querySelector('.blocks__item[data-item="screen"]').className = 'blocks__item';
		document.querySelector('.blocks__item[data-item="goods"]').className = 'blocks__item';
		document.querySelector('.blocks__item[data-item="reviews"]').className = 'blocks__item';
		document.querySelector('.blocks__item[data-item="contacts"]').className = 'blocks__item';
});

document.querySelector('.blocks__item[data-item="reviews"]').addEventListener('mouseenter', function() {
		document.querySelector('.blocks__phone-bg').classList.add('blocks__phone-bg--reviews');
		document.querySelector('.blocks__phone-bg').className = 'blocks__phone-bg blocks__phone-bg--reviews';

		document.querySelector('.blocks__item[data-item="reviews"]').classList.add('blocks__item--active');
		document.querySelector('.blocks__item[data-item="goods"]').className = 'blocks__item';
		document.querySelector('.blocks__item[data-item="gallery"]').className = 'blocks__item';
		document.querySelector('.blocks__item[data-item="screen"]').className = 'blocks__item';
		document.querySelector('.blocks__item[data-item="contacts"]').className = 'blocks__item';
});

document.querySelector('.blocks__item[data-item="contacts"]').addEventListener('mouseenter', function() {
		document.querySelector('.blocks__phone-bg').classList.add('blocks__phone-bg--contacts');
		document.querySelector('.blocks__phone-bg').className = 'blocks__phone-bg blocks__phone-bg--contacts';

		document.querySelector('.blocks__item[data-item="contacts"]').classList.add('blocks__item--active');
		document.querySelector('.blocks__item[data-item="goods"]').className = 'blocks__item';
		document.querySelector('.blocks__item[data-item="gallery"]').className = 'blocks__item';
		document.querySelector('.blocks__item[data-item="reviews"]').className = 'blocks__item';
		document.querySelector('.blocks__item[data-item="screen"]').className = 'blocks__item';
});
</script>

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

Comments

[WbICHA]

document.querySelector('.blocks__phone-bg').classList.add('blocks__phone-bg--contacts');
document.querySelector('.blocks__phone-bg').className = 'blocks__phone-bg blocks__phone-bg--contacts';

Тебя здесь ничего не смущает?
Собственно, как и Григорий Боев 'a?

[Сергей delphinpro]

Нужно обозначить общий признак у всех элементов.

[Сергей Соколов]

можно «делегировать» обработку событий выше в DOM-дереве.
Например, см. отличный ответ на похожий вопрос: https://qna.habr.com/answer?answer_id=2234568#answ...

Главный плюс: с добавлением новых элементов не придётся менять код.

Answer 1

[garbagecollected]

// Пусть, список будет в строке разделенной вертикальной чертой
"contacts|goods|gallery|reviews|screen".split`|`
// Находим каждый элемент
.map(data=>document.querySelector(`.blocks__item[data-item="${data}"]`))
// Вешаем на элементы событие mouseenter
.forEach(el=>el.addEventListener('mouseenter',e=>{
  // Класс активного элемента надо удалить только у активного элемента
  document.querySelector`.blocks__item.blocks__item--active`.classList.remove`blocks__item--active`;
  // А элементу, вызвавшему это событие надо добавить класс активности
  e.target.classList.add`blocks__item--active`;
  // Еще где-то какому-то элементу присвоим класс, частично формирующийся из атрибута элемента события 
  document.querySelector`.blocks__phone-bg`.className = `blocks__phone-bg blocks__phone-bg--${e.target.getAttribute`data-item`}`;
});
// Вот и все!

Comments

[Za Za]

все вроде так просто только чет не работает ))

[garbagecollected]

Za Za, Все работает, кавычки неправильно скопировались
https://codepen.io/zazaulola/pen/ZEomzKz

[Za Za]

garbagecollected, ` ' - какая разница у этих кавычек?
просто впервые вижу чтоб использовалось три вида " ` '

[Сергей delphinpro]

Еще один...

"contacts|goods|gallery|reviews|screen".split`|`

При добавлении элемента в разметку, всё равно придется править javascript код
Садись, два.

[garbagecollected]

Сергей delphinpro, тут вопрос был упростить код. Код упрощен. Работает так, как задумывал автор. Что еще надо то?

[garbagecollected]

Za Za, открывающие кавычки на клавише TILDA работают как строковые шаблоны. Иногда можно опускать скобочки (если нужно передать в функцию один параметр).

[WbICHA]

Сергей delphinpro, а в чём проблема-то? Автору же нежно изменить только часть блоков. Если бы ему нужно было бы менять все, то он бы воспользовался селектором ".blocks__item".

[Сергей delphinpro]

WbICHA, именно так и нужно было сделать, а эти данные - contacts|goods|gallery|reviews|screen - брать из атрибутов. Тогда единожды написанный код работал бы с любым количеством блоков, без изменения самого кода.

[Za Za]

Сергей delphinpro, а зачем говорить, что да как нужно делать без примера?
напоминает "хочешь быть счастливым - будь им, хочешь хороший код - напиши его" )))

[Сергей delphinpro]

Za Za, да писать-то нечего. примитивная, скучная задачка

const targetElement = document.querySelector('.blocks__phone-bg');
const allBlocks = document.querySelectorAll(`.blocks__item[data-item]`);
allBlocks.forEach(block => {
    block.addEventListener('mouseenter', () => {
        allBlocks.forEach(el => el.classList.remove('blocks__item--active'));
        block.classList.add('blocks__item--active');
        targetElement.className = `blocks__phone-bg blocks__phone-bg--${block.dataset.item}`;
    });
});

[Za Za]

Сергей delphinpro, для вас нечего и скучно, а для людей, которые в режиме хобби пытаются улучшать что либо - это хорошее пособие.

[WbICHA]

Сергей delphinpro, опять же, это если автору нужны все .blocks__item, а я думал ему нужны только часть из них. Если все, то твоё решение абсолютно верное.

[Сергей delphinpro]

WbICHA, ну я не все взял, а только с атрибутом data-item

[WbICHA]

Сергей delphinpro, до, некорректно выразился, я имел ввиду, что одно дело взять все с дата атрибутом, а другое дело только часть.

Answer 2

[Григорий Боев]

Отделите данные от скрипта, будет компактнее. Да и много повторений

const tags = ['screen', 'goods', 'gallery', 'reviews', 'contacts'];
function enableBlock(blockTag) {
    document.querySelector('.blocks__phone-bg').classList.add(`blocks__phone-bg--${blockTag}`);
    document.querySelector('.blocks__phone-bg').className = `blocks__phone-bg blocks__phone-bg--${blockTag}`;
    tags.forEach(tag=>{
      let elem = document.querySelector(`.blocks__item[data-item="${tag}"]`);
      if (!elem){
         return;
      };
      if (blockTag===tag){
        elem.classList.add('blocks__item--active');
      }else{
        elem.className = 'blocks__item';
      };
    });
}

Comments

[WbICHA]

if (elem && (blockTag===tag)){
        elem.classList.add('blocks__item--active');
      }else{
        elem.className = 'blocks__item';
      };

Какое замечательное условие для эксепшена.

[Za Za]

не срабатывает при наведении на .blocks__item[data-item="${tag}"]

[Григорий Боев]

WbICHA, да, точно, увидел.

[Сергей delphinpro]

const tags = ['screen', 'goods', 'gallery', 'reviews', 'contacts'];

При добавлении элемента в разметку, всё равно придется править javascript код
Садись, два.