Tengo una cosa de imagen de punto de acceso en la que tienes puntos (llamados "elementos") flotando sobre la imagen en los que se puede hacer clic. Cuando hace clic en dicho elemento, aparece un cuadro de texto en el lado derecho de la imagen con toda la información. Ahora, si hace clic en otro elemento, el cuadro de texto debe cerrarse y se abre uno nuevo.
Este es el código actual:
jQuery(document).ready(function() { counter = 1; var lastHotspot = 0; jQuery("#{{item.item_id}}").click(function(){ if (counter == 1) { jQuery("#textbox{{item.item_id}}").show(); lastHotspot = {{item.item_id}}; counter++; } else { jQuery("#textbox" + lastHotspot).hide(); jQuery("#textbox{{item.item_id}}").show(); lastHotspot = {{item.item_id}}; } }); });Debido a que no hay un cuadro de texto la primera vez que se carga todo, quiero ejecutar ".show" en el cuadro de texto la primera vez que hace clic en un elemento y luego almacena la identificación del elemento. Después de eso, cuando hago clic en un elemento, debe ".ocultar" el cuadro de texto del elemento anterior, luego ".mostrar" el siguiente cuadro de texto del elemento en el que se hizo clic y luego reasignar el ID del elemento a "lastHotspot" y luego repetir cada vez que se hace clic en un elemento.
El problema que tengo es que "lastHotspot" no se almacena dentro de la variable después de ser reasignado dentro de la función if, aunque el contador sí. ¿Cómo puedo solucionar este problema?
Puede vincular las funciones antes de adjuntarlas a los eventos de clic, o puede usar un objeto global para modificar los contadores:
jQuery(document).ready(function() { counter = 1; var lastHotspot = 0; jQuery("#{{item.item_id}}").click((function(){ if (counter == 1) { jQuery("#textbox{{item.item_id}}").show(); lastHotspot = {{item.item_id}}; counter++; } else { jQuery("#textbox" + lastHotspot).hide(); jQuery("#textbox{{item.item_id}}").show(); lastHotspot = {{item.item_id}}; } }).bind(this)); });Usando objetos globales:
jQuery(document).ready(function() { configs = { counter: 1 }; var lastHotspot = 0; jQuery("#{{item.item_id}}").click(function(){ if (configs.counter == 1) { jQuery("#textbox{{item.item_id}}").show(); lastHotspot = {{item.item_id}}; configs.counter++; } else { <...> } }); });