jquery - ¿El listener de botón de Javascript se ejecuta una vez?
Estoy haciendo un rotador tipo presentación de diapositivas para un sitio web que estoy creando. El rotador en sí funciona bien, pero estoy intentando hacer que la presentación avance/retroceda con las teclas izquierda/derecha del teclado. Mi código es este:
$(document).keydown(function(e){
var currentPosition = 0;
var slideWidth = 836;
var slides = $('.slide');
var numberOfSlides = slides.length;
var animLength = 600;
if (e.keyCode == 37) {
currentPosition = currentPosition-1;
// Check to see if new position is unbounded, and wrap accordingly.
checkForEnds(currentPosition);
// Move slideInner using margin-left
$('#slideInner').animate({
'marginLeft' : slideWidth*(-currentPosition)
}, animLength, 'easeOutExpo');
animLength=600;
return false;
}
/*Same code for right button, removed to save space.*/
function checkForEnds(position){
// If left is clicked on first slide, wrap to end.
if(position==-1){currentPosition = numberOfSlides-1, animLength=1000}
// If right is clicked on last slide, wrap to beginning.
if(position==numberOfSlides){currentPosition = 0, animLength=1000}
}
});
Mi código funciona bien, pero solo una vez. Puedo girar a la izquierda una vez o a la derecha una vez, pero después de hacerlo, no puedo volver a usar la misma tecla hasta que se haya presionado otra. Soy muy nuevo en la entrada de Javascript, ¿hay una solución simple para esto?
Aquí está el sitio temporal. Es un desastre por ahora, pero puedo encargarme de todas las cosas extrañas de orden y problemas de diseño bastante bien. http://technoheads.org/test/ice/
Respuesta #1
Ok, resolví esto.
Esto no tiene nada que ver con el hecho de que estés vinculando un evento; el evento se dispara correctamente, pero la ecuación que utilizas para calcular la posición es incorrecta.
Estás definiendo la variable currentPosition dentro del bloque; por lo que se define cada vez que se dispara el evento; así que siempre obtendrás el mismo valor una vez que se activa.
Lo que hice para resolver esto fue mover el currentPosition al espacio global.
Míralo en vivo aquí: http://jsfiddle.net/kuroir/SSd3r/
También tenga en cuenta que es importante que utilice el depurador cuando esté trabajando con este tipo de problemas, le recomiendo encarecidamente que use Google Chrome para esto.
Respuesta #2
Cada vez que se dispara el evento keydown, estás redefiniendo 'currentPosition' sin importar tu posición actual en las diapositivas. Aunque este no es el único problema con el código, va a causar la mayor parte del comportamiento extraño. Arregla ese problema primero y trabaja a partir de ahí. Shawn tiene razón, usa el depurador y establece puntos de interrupción.