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';
}
});
2 ответа
Пункт 1 можно пропустить - перейти сразу к пункту 2.
- Для начала можно чуть-чуть лишние пробелы убрать - легче читать будет:
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';
}
});
<p class="p1">p1</p>
<p class="p2">p2</p>
<p class="p3">p3</p>
<p class="p4">p4</p>
<p class="p5">p5</p>
<div class="d1">d1</div>
<div class="d2">d2</div>
<div class="d3">d3</div>
<div class="d4">d4</div>
<div class="d5">d5</div>
- Когда стало легче читать, объединяем в цикл повторяющиеся блоки:
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';
}
});
};
<p class="p1">p1</p>
<p class="p2">p2</p>
<p class="p3">p3</p>
<p class="p4">p4</p>
<p class="p5">p5</p>
<div class="d1">d1</div>
<div class="d2">d2</div>
<div class="d3">d3</div>
<div class="d4">d4</div>
<div class="d5">d5</div>
-
-
-
-
Я бы еще
document.querySelector('.d' + i).style.display
вlet elmStyle = document.querySelector('.d' + i).style.display
переделал. – Total Pusher 19 фев '19 в 3:54
Конечно можно...
Что бы не прописывать, отдельно функцию для каждого элемента, лучше использовать циклы.
Именно данный пример реализован методом 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'
})
})
<p class="p p1">p1</p>
<p class="p p2">p2</p>
<p class="p p3">p3</p>
<p class="p p4">p4</p>
<div class="d d1">d1</div>
<div class="d d2">d2</div>
<div class="d d3">d3</div>
<div class="d d4">d4</div>
Но как справедливо отметил, Grundy, в комментах, то если изменить структуру верстки, данный пример не будет работать верно, так как будет нарушена последовательность элементов. Если элементы в верстке расположены не подряд, но надо что бы тот или иной конкретный элемент имел воздействие на тот или иной, то придется код исправлять для реализации конкретной задачи