I need to write on pure JS but I don’t understand how to implement $ (this) .data (); - CTACO23
2
el.getAttribute('data-block-id'); - Alexander Igorevich
var block_id = document.getElementById ('block-id'); - Quazimorda
@AlexanderIgorevich is good, but do not tell me how best to call this function: is it worth it to push an onclick into the input? - CTACO23
@ CTACO23, handlers on top-level elements are always preferable.Do not assign them to each input.The best thing to do is to assign a single handler to the ul element. - yar85
|
3 answers 3
var input = document.querySelectorAll('.navigation input'); function toggle(){ var blockId = this.getAttribute('data-block-id'), el = document.getElementById(blockId), rect = document.querySelectorAll('.rect'); for(var i = 0; i<rect.length; i++){ rect[i].style.visibility = "hidden"; } el.style.visibility = "visible"; } for(var i = 0; i<input.length; i++){ input[i].addEventListener('click', toggle) }
what you need!) And how to do so that when you press the next, the previous ones were removed? - CTACO23
@ CTACO23, made changes - zhurof
ok, thanks, but: if the blocks are located in one place, then it is impossible to switch to the previous block - CTACO23
@ CTACO23, is it?The visible block is selected by id.The position on the page is not important. - zhurof
one
I would by the way advised to pay attention to the solution from @ yar85.His js-code is smaller and cleaner. - zhurof
|
document.addEventListener('click', function (e) { var block_id = e.target.dataset.blockId; if (block_id && (block_el = document.getElementById(block_id))) { alert("gello"); // [ +] наверное, нужно сначала скрыть ранее показанный(-ые)? for (let b of document.querySelectorAll('#charts > [id^="chart_div"]')) b.style.visibility = 'hidden'; // [/+] block_el.style.visibility = 'visible'; } });
el.getAttribute('data-block-id');- Alexander Igorevichulelement. - yar85