Tengo muchos botones y también un div emergente que incluye contenido corto o largo según el valor de un mapa.
Caso 1: si el contenido está oculto (windows.onload, está oculto), si se hace clic en cualquier botón, el contenido debe estar visible, luego, si se hace clic en el mismo botón, el contenido debe ocultarse nuevamente.
Caso 2: si el contenido es visible debido a que se hizo clic en un botón, si se hace clic en cualquier botón (excepto el mismo botón como en el caso 1), el contenido no debe ocultarse, debe seguir siendo visible.
En el código a continuación, pude manejar el caso 1 pero no el caso 2. Creo que necesito hacer una función de comparación entre la primera y la última vez que se llamaron los valores de los botones, pero no puedo encontrar la forma de almacenar el primer valor, así que no puedo hacer una comparación.
¿Debería usar "Cierres de JavaScript" porque creo que puede funcionar? https://www.w3schools.com/js/tryit.asp?filename=tryjs_function_closures5 si debería, ¿hay alguna solución? prefiero usar otro método en lugar de usar Cierres porque no entiendo lo suficiente la lógica de "Cierres" por ahora.
Gracias.
function infoFunc(clicked_value) { let infoText = ""; let control = "q1"; for (let qvalue of questionDetails.keys()) { if (clicked_value == qvalue) { let y = questionDetails.get(qvalue); infoText = `<p>${y}</p>`; document.getElementById("questioninfoDiv").innerHTML = infoText; } } popupcontrolFunc(clicked_value, control); } /* Functions: " control of information popup" */ function popupcontrolFunc(clicked_value, control) { if (control == clicked_value) { popupTrueOrFalse(); } else { popupTrue(); control = clicked_value; } } function popupTrueOrFalse() { let popup = document.getElementById("questioninfoDiv"); popup.classList.toggle("show"); } function popupTrue() { let popup = document.getElementById("questioninfoDiv"); popup.classList.toggle("show", true); } <button type="button" id="questionInfoimg" value="${key}" onClick="infoFunc(this.value)"><img src="question-mark.svg" alt="Info_Mark"> </button>editar: supongo, necesito dejarlo más claro. Consulte https://jsfiddle.net/GrayCollar/odnhgkpx/22/ En realidad, creo que necesito un algoritmo y una forma de usar ese algoritmo como "cierres js". No estoy seguro acerca de los "cierres js", solo trate de explicar lo que necesito.
No necesitas cierres.
La palabra clave this hará el truco. Según la red de desarrolladores de Mozilla ,
Cuando se utiliza una función como controlador de eventos, se establece en el elemento en el que se coloca el oyente (algunos navegadores no siguen esta convención para los oyentes agregados dinámicamente con métodos distintos de
addEventListener()).
Esto no funcionará en modo estricto. En ese caso, tendrá que pasar un objeto de evento a la función, que se ve así.
element.addEventListener(eventString, function(e){ //e is the event object }); Este objeto de evento tiene una propiedad currentTarget , que es básicamente el elemento al que se dirige el evento, que en este caso es el botón en el que se hace clic. Todo junto, se ve así:
function eventHandler(e){ //use e.currentTarget } element.addEventListener(eventString, eventHandler);