Tengo lo siguiente sobre la información de la tienda:
<h3 class="-center"><shop>Shop name</shop></h3> <button type="button" id="banff" onclick="showShop(this.id)"><shop-title><b>Bakery Shop</b></shop-title></button> <p class="move-right"><shop-info>Shop Address · Shop number</shop-info></p> <div id="shop" class="hidden"> <p><shop-info>Opening soon</shop-info></p> </div>Lo que estoy tratando de hacer es que una vez que se hace clic en el botón, obtendrá el primer div después del botón y alternará la clase oculta sin hacer referencia a la identificación, habrá varias tiendas, así que estoy tratando de crear una función que funcione para todos ellos en lugar de crear una función individual para cada uno.
Pensé que podría hacer algo como:
function showShop(id) { const elem = document.getElementById(id); alert(id); const div = elem.closest('div'); div.classList.toggle('hidden'); }Pero hace referencia al primer div en la página en lugar del primero después del botón, ¿dónde me equivoqué aquí? ¿O tengo que hacer esto de otra manera?
Gracias de antemano por cualquier consejo.
¿Qué pasa con la conexión de la identificación del botón con la identificación del div?
algo como:
<h3 class="-center"><shop>Shop name</shop></h3> <button type="button" id="button-1" onclick="showShop(this.id)"> <shop-title><b>Bakery Shop</b></shop-title> </button> <p class="move-right"><shop-info>Shop Address · Shop number</shop-info></p> <div id="shop-button-1" class="hidden"> <p><shop-info>Opening soon</shop-info></p> </div>y en el código javascript sería posible simplificar a:
function showShop(id) { const elem = document.getElementById(id); const div = document.getElementById('shop-' + id); div.classList.toggle('hidden'); }Debe intentar evitar el uso de id , ya que es difícil realizar un seguimiento de ellos. En su lugar, debe navegar en relación con el botón en el que se hizo clic. A continuación se muestra una secuencia de comandos que puede encargarse fácilmente de varias secciones de la tienda sin usar ninguna id :
document.querySelectorAll("button").forEach(btn=>{ for(var div=btn;div=div.nextElementSibling;) if(div.tagName==="DIV") break; if(div) btn.onclick=()=>div.classList.toggle("hidden") }) .hidden {display:none} <h3 class="-center"><shop>Shop name</shop></h3> <button><shop-title><b>Bakery Shop</b></shop-title></button> <p class="move-right"><shop-info>Shop Address · Shop number</shop-info></p> <div class="hidden">Info on bakery shop: <p><shop-info>Opening soon</shop-info></p> </div> <button><shop-title><b>Iron Monger</b></shop-title></button> <p class="move-right"><shop-info>Shop Address · Shop number</shop-info></p> <div class="hidden">Info on iron monger's: <p><shop-info>already open!</shop-info></p> </div> <button><shop-title><b>Fish Monger</b></shop-title></button> <p class="move-right"><shop-info>Shop Address · Shop number</shop-info></p> <div class="hidden">Info on fish monger's: <p><shop-info>will never open!</shop-info></p> </div> En mi última actualización, modifiqué el fragmento nuevamente para que ahora haga la "navegación relativa al <div> asociado" solo una vez : en el momento en que defino y agrego el detector de eventos onclick .