Подскажите пожалуйста,можно ли оптимизировать код?

#javascript #инспекция_кода

let p1 = document.querySelector('.p1');
p1.addEventListener('click', function(){
    if(document.querySelector('.d1').style.display != 'block')
    {
        document.querySelector('.d1').style.display = 'block';
    }
    else
    {
        document.querySelector('.d1').style.display = 'none';
    }
});


let p2 = document.querySelector('.p2');
p2.addEventListener('click', function(){
    if(document.querySelector('.d2').style.display != 'block')
    {
        document.querySelector('.d2').style.display = 'block';
    }
    else
    {
        document.querySelector('.d2').style.display = 'none';
    }
});



let p3 = document.querySelector('.p3');
p3.addEventListener('click', function(){
    if(document.querySelector('.d3').style.display != 'block')
    {
        document.querySelector('.d3').style.display = 'block';
    }
    else
    {
        document.querySelector('.d3').style.display = 'none';
    }
});



let p4 = document.querySelector('.p4');
p4.addEventListener('click', function(){
    if(document.querySelector('.d4').style.display != 'block')
    {
        document.querySelector('.d4').style.display = 'block';
    }
    else
    {
        document.querySelector('.d4').style.display = 'none';
    }
});

let p5 = document.querySelector('.p5');
p5.addEventListener('click', function(){
    if(document.querySelector('.d5').style.display != 'block')
    {
        document.querySelector('.d5').style.display = 'block';
    }
    else
    {
        document.querySelector('.d5').style.display = 'none';
    }
});

    

Ответы

Ответ 1

Для начала можно чуть-чуть лишние пробелы убрать - легче читать будет:




let p1 = document.querySelector('.p1');
p1.addEventListener('click', function() {
    if (document.querySelector('.d1').style.display != 'block') {
        document.querySelector('.d1').style.display = 'block';
    } else {
        document.querySelector('.d1').style.display = 'none';
    }
});

let p2 = document.querySelector('.p2');
p2.addEventListener('click', function() {
    if (document.querySelector('.d2').style.display != 'block') {
        document.querySelector('.d2').style.display = 'block';
    } else {
        document.querySelector('.d2').style.display = 'none';
    }
});

let p3 = document.querySelector('.p3');
p3.addEventListener('click', function() {
    if (document.querySelector('.d3').style.display != 'block') {
        document.querySelector('.d3').style.display = 'block';
    } else {
        document.querySelector('.d3').style.display = 'none';
    }
});

let p4 = document.querySelector('.p4');
p4.addEventListener('click', function() {
    if (document.querySelector('.d4').style.display != 'block') {
        document.querySelector('.d4').style.display = 'block';
    } else {
        document.querySelector('.d4').style.display = 'none';
    }
});

let p5 = document.querySelector('.p5');
p5.addEventListener('click', function() {
    if (document.querySelector('.d5').style.display != 'block') {
        document.querySelector('.d5').style.display = 'block';
    } else {
        document.querySelector('.d5').style.display = 'none';
    }
});
p1
p2
p3
p4
p5

d1
d2
d3
d4
d5





Когда стало легче читать, объединяем в цикл повторяющиеся блоки:




let p = [];
for (let i = 1; i <= 5; i++) {
  p[i] = document.querySelector('.p' + i);
  p[i].addEventListener('click', function() {
    if (document.querySelector('.d' + i).style.display != 'block') {
      document.querySelector('.d' + i).style.display = 'block';
    } else {
      document.querySelector('.d' + i).style.display = 'none';
    }
  });
};
p1
p2
p3
p4
p5

d1
d2
d3
d4
d5






P.S. Пункт 1 можно пропустить - перейти сразу к пункту 2.


Ответ 2

Конечно можно...

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

Именно данный пример реализован методом forEach((s, i arr )=>{})

У которого есть три аргумента  s - это аналог this, i - это индекс элемента и arr
- это коллекция, последний в данном примере не нужен.



const d = document.querySelectorAll('.d');

// прокручиваем все эллементы в цикле
[...document.querySelectorAll('.p')].forEach((s, i) => {
// S - это тот элемент на который кликнули
  s.addEventListener('click', () => {
  // [i] - это индекс того элемента на который  кликнули
  // идалее тернаный оператор в аналог if(){}
  // если у данного элемента d[i].style.display === 'none'то 
  // присваиваем block или на оборот
    d[i].style.display = (d[i].style.display === 'none') ?
      d[i].style.display = 'block' :
      d[i].style.display = 'none'
  })
})
p1
p2
p3
p4

d1
d2
d3
d4




Но как справедливо отметил, Grundy, в комментах, то если изменить структуру верстки,
данный пример не будет работать верно, так как будет нарушена последовательность элементов.
Если элементы в верстке расположены не подряд, 
но надо что бы тот или иной конкретный элемент имел воздействие на тот или иной,
то придется код исправлять для реализации конкретной задачи