Cada vez que hago clic en el primer botón, quiero ocultar el resto de los elementos y mostrar el título con la descripción del primer elemento, también quiero hacer esto para los demás elementos. Cada vez que trato de hacer esto, no puedo apuntar a todos los elementos en mi función. ¿Alguien puede ayudar? ¿También debería agregar a los botones algo como data-* y en función de esa visualización/mostrar el div?
class MyClass { constructor() { this.items = document.querySelectorAll('.test'); this.btn = document.querySelector('.click'); console.log(this.items); //logs elements this.btn.addEventListener("click", this.testFunc); } testFunc() { console.log(this.items); //undefined ? } } new MyClass(); .test { display: none; } <div class="item first"> <h3>Item-1</h3> <p class="test"> dadwa dwao dawkda </p> </div> <div class="item second"> <h3>Item-1</h3> <p class="test"> dadwa dwao dawkda </p> </div> <div class="item third"> <h3>Item-1</h3> <p class="test"> dadwa dwao dawkda </p> </div> <button class="click"> Test </button> <button class="click"> Test </button> <button class="click"> Test </button>La siguiente actualización de su MyClass debería funcionar.
El cambio principal es que adjunta un detector de eventos a todos los botones (cambió querySelector('.click') a querySelectorAll('.click') . Y la función auxiliar showItem toma un índice que es qué elemento mostrar (y oculta todos los descansar).
Estoy usando el atributo hidden para mostrar/ocultar elementos. En su lugar, podría agregar o eliminar una clase del elemento que tiene la display: none .
class MyClass { constructor() { this.items = document.querySelectorAll(".test"); this.btns = document.querySelectorAll(".click"); this.items.forEach((item, index) => { item.setAttribute("hidden", true); this.btns .item(index) .addEventListener("click", (ev) => this.showItem(index)); }); } showItem(idx) { this.items.forEach((item, index) => { if (index === idx) { item.removeAttribute("hidden"); } else { item.setAttribute("hidden", true); } }); } } new MyClass(); <div class="item first"> <h3>Item-1</h3> <p class="test"> dadwa dwao dawkda </p> </div> <div class="item second"> <h3>Item-2</h3> <p class="test"> dadwa dwao dawkda </p> </div> <div class="item third"> <h3>Item-3</h3> <p class="test"> dadwa dwao dawkda </p> </div> <button class="click"> Test 1 </button> <button class="click"> Test 2 </button> <button class="click"> Test 3 </button>