Բազմաթիվ էլեմենտներ կոճակներով ցուցադրելու համար JavaScript-ում

Ենթադրենք, այժմ մենք ունենք բազմաթիվ պարբերություններ, և յուրաքանչյուրն ունի իր թաքցնելու կոճակը.

html<p>1</p><button>toggle</button>
<p>2</p><button>toggle</button>
<p>3</p><button>toggle</button>

Եկեք կատարենք այնպես, որ կոճակի վրա կտտացնելիս թաքնվի կամ ցուցադրվի դրան համապատասխանող պարբերությունը:

Դրա համար մեզ ինչ-որ կերպ պետք է կապել կոճակները մեր պարբերությունների հետ: Դրա համար գոյություն ունի մի քանի մեթոդ:

Առաջին մեթոդը

Եկեք կապենք կոճակներն ու պարբերությունները հետևյալ կերպ.

html<p id="elem1">1</p><button data-elem="elem1">toggle</button>
<p id="elem2">2</p><button data-elem="elem2">toggle</button>
<p id="elem3">3</p><button data-elem="elem3">toggle</button>

Այժմ ցանկացած կոճակի վրա կտտացնելիս մենք կկարդանք նրա data-elem ատրիբուտի պարունակությունը և կփնտրենք նույն id-ով պարբերություն: Հենց դրան կթոգլենք: Եկեք իրականացնենք նկարագրվածը.

javascriptlet buttons = document.querySelectorAll('button');

for (let button of buttons) {
  button.addEventListener('click', function() {
    let elem = document.querySelector('#' + this.dataset.elem);
    elem.classList.toggle('hidden');
  });
}

Երկրորդ մեթոդը

id-ներ և data-ատրիբուտներ տեղադրելը այնքան էլ հարմար չէ: Եկեք կատարենք այնպես, որ կապը լինի հերթական համարի համաձայն. թող առաջին կոճակը թաքցնի առաջին պարբերությունը, երկրորդ կոճակը՝ երկրորդը և այդպես շարունակ:

Եկեք իրականացնենք նկարագրվածը.

javascriptlet buttons = document.querySelectorAll('button');
let elems   = document.querySelectorAll('p');

for (let i = 0; i < buttons.length; i++) {
  buttons[i].addEventListener('click', function() {
    elems[i].classList.toggle('hidden');
  });
}

Երրորդ մեթոդը

Ինչպես կարելի է տեսնել, կոճակի հետ կապված պարբերությունը նրա ձախ հարևանն է: Կարելի է օգտագործել սա որպես կապ.

javascriptlet buttons = document.querySelectorAll('button');

for (let button of buttons) {
  button.addEventListener('click', function() {
    this.previousElementSibling.classList.toggle('hidden');
  });
}