Soy bastante nuevo en JS.
Por n cantidad de divs de barra, tengo n cantidad de divs de foo. Al hacer clic en la barra [1], quiero que foo [1] se muestre u oculte. Lo mismo ocurre con bar[2]/foo[2], bar[5]/foo[5], bar[3]/foo[3],...bar[n]/foo[n] sin orden exacto .
Con este código, puedo mostrar y ocultar, pero solo todos los divs al mismo tiempo. ¿Qué debo cambiar para poder ocultar o mostrar solo uno de los divs?
function getContent() { var x = document.getElementsByClassName("foo"); for (var i = 0; i < x.length; i++) { if (x[i].style.display === "none") { x[i].style.display = "block"; } else { x[i].style.display = "none"; } } } document.querySelector(".bar").addEventListener("click", getContent); .foo { display: none; } .bar { padding: 5px; display: block; } <div> <div class="bar" onclick="getContent()">bar</div> </div> <div class="foo">foo</div>Use una variable para mantener el índice del DIV actual para mostrar, en lugar de recorrer todos los DIV.
let fooIndex = 0; let allFoo = document.querySelectorAll(".foo"); function getContent() { if (fooIndex < allFoo.length) { allFoo[fooIndex].classList.toggle("foo"); allFoo[fooIndex].classList.toggle("bar"); fooIndex++; } } document.querySelector(".bar").addEventListener("click", getContent); .foo { display: none; } .bar { padding: 5px; display: block; } <div> <div class="bar">bar</div> </div> <div class="foo">foo1</div> <div class="foo">foo2</div> <div class="foo">foo3</div> <div class="foo">foo4</div>No es necesario usar JS aquí, HTML es más poderoso de lo que cree: si desea mostrar u ocultar información, el elemento <detalles> lo tiene cubierto.
.all-or-nothing summary { display: inline-block; cursor: pointer; } <details class="all-or-nothing"> <summary>Toggle all divs</summary> <div> The first div </div> <div> The second div </div> <div> The third div </div> </details> //let fooIndex = 0; function getContent() { var x = $(".card"); x.append('<div class="foo" onclick="hideContent(this)">foo1</div>'); //$(this).addClass('bar'); } function hideContent(a) { $(a).removeClass('foo'); $(a).addClass('bar'); } .foo { display: none; } .bar { padding: 5px; display: block; } <div class="card"> <div onclick="getContent();" class="bar">bar</div> </div>