Me gustaría simplificar mi código, usar la misma función, para la misma clase, pero solo activando el que se está haciendo clic (cambiando el texto). Con JavaScript simple. Lo tengo funcionando ahora, pero sé que puede ser más simple y reutilizable, incluso si tuviera que usar 100 de lo mismo.
¿Podría ayudarme a simplificar y mejorar el siguiente código?
Código:
// Change the title of dropdown to show/hide // 1. create function to change text const changeText = function changeText() { if (this.innerHTML == "Show details") { this.innerHTML = "Hide details" } else { this.innerHTML = "Show details" } }; // 2. add click event on element to trigger text change document.querySelector('summary.priceSummary').onclick = changeText; document.querySelector('summary.priceSummary2').onclick = changeText; document.querySelector('summary.priceSummary3').onclick = changeText; <details> <summary class="priceSummary">Show details</summary> <ul> <li>test</li> <li>test</li> <li>test</li> <li>test</li> </ul> </details> <details> <summary class="priceSummary2">Show details</summary> <ul> <li>test</li> <li>test</li> <li>test</li> <li>test</li> </ul> </details> <details> <summary class="priceSummary3">Show details</summary> <ul> <li>test</li> <li>test</li> <li>`enter code here`test</li> <li>test</li> </ul> </details>Simplemente seleccione todos los elementos de summary e itere sobre ellos en lugar de seleccionar priceSummary2 etc.
for (const summary of document.querySelectorAll('summary')) { summary.onclick = () => summary.textContent = summary.textContent = 'Show details' ? 'Hide details' : 'Show details'; } Si tiene otros elementos de resumen, asígneles un nombre de clase en común; por ejemplo, llámelos a todos priceSummary y luego puede hacer querySelectorAll('.priceSummary') en su lugar.
Otra opción es alternar una clase y hacer que las reglas de CSS muestren u oculten el elemento "Ocultar detalles" o "Mostrar detalles" de manera adecuada.
for (const summary of document.querySelectorAll('.priceSummary')) { summary.addEventListener('click', () => summary.classList.toggle('show')); } .priceSummary:not(.show) > :first-child, .priceSummary.show > :nth-child(2) { display: none; } <details> <summary class="priceSummary show"><span>Show</span><span>hide</span> details</summary> <ul> <li>test</li> <li>test</li> <li>test</li> <li>test</li> </ul> </details> <details> <summary class="priceSummary show"><span>Show</span><span>hide</span> details</summary> <ul> <li>test</li> <li>test</li> <li>test</li> <li>test</li> </ul> </details> <details> <summary class="priceSummary show"><span>Show</span><span>hide</span> details</summary> <ul> <li>test</li> <li>test</li> <li>`enter code here`test</li> <li>test</li> </ul> </details>Asigne a todos sus elementos la misma clase, luego use document.querySelectorAll() y recorra sobre ellos.
// Change the title of dropdown to show/hide // 1. create function to change text const changeText = function changeText() { if (this.innerHTML == "Show details") { this.innerHTML = "Hide details" } else { this.innerHTML = "Show details" } }; // 2. add click event on element to trigger text change document.querySelectorAll('summary.priceSummary').forEach(el => el.addEventListener("click", changeText)); <details> <summary class="priceSummary">Show details</summary> <ul> <li>test</li> <li>test</li> <li>test</li> <li>test</li> </ul> </details> <details> <summary class="priceSummary">Show details</summary> <ul> <li>test</li> <li>test</li> <li>test</li> <li>test</li> </ul> </details> <details> <summary class="priceSummary">Show details</summary> <ul> <li>test</li> <li>test</li> <li>`enter code here`test</li> <li>test</li> </ul> </details>