Obtenga el índice de la lista desordenada y la posición de desplazamiento (arriba y abajo) al hacer clic

Tengo un calendario de eventos, el ul tiene una altura fija y un desbordamiento oculto, los li también tienen una altura fija. Sólo cuatro son visibles a la vez. Necesito averiguar cómo desplazarme por la lista, tanto hacia arriba como hacia abajo al hacer clic en el botón correspondiente.

Estoy seguro de que hay complementos que pueden hacer esto, pero para una mejor comprensión de jQuery/JS, quiero hacerlo por mi cuenta, pero necesito ayuda. HTML/CSS está aquí http://jsfiddle.net/DirtyBirdDesign/BJdJ7/

He desglosado esto en las siguientes necesidades:

  1. Recorra e indexe el número de elementos de la lista
  2. Obtener la posición actual
  3. en cada clic del botón 'abajo', mueva la posición -41px
  4. en cada clic del botón 'arriba', mueva la posición +41px
  5. animar la transición
  6. Bucle continuamente: vaya del último al primero cuando el último sea visible

¿Me estoy perdiendo algo en lo anterior? ¿Cómo hago esto? gracias por el conocimiento!

preguntado el 03 de mayo de 12 a las 16:05

Te di una respuesta bastante funcional, puedo hacerlo. cumplir exactamente ¡tus necesidades! ¿Pero no quieres hacer un pequeño esfuerzo? -

Lo hago, pero no estoy haciendo la conexión completa. Estaba pensando que necesito obtener un índice de los niños li y recorrerlos con cada clic. Puedo mover el posicionamiento, pero me encontré con el mismo problema que tiene su solución: simplemente agregar más espacios en blanco antes y después del primer y último elemento al hacer clic en el botón arriba/abajo. -

2 Respuestas

tienes que cambiar de posición: CSS relativo a tu li

#PartnerSchedule ul#PartnerEvents li {
  position:relative;
  width:457px;
  height:41px;
  margin:0 0 2px 0;
  padding:0 10px;
  font:.9em/1.75em "Helvetica Neue", Arial, Helvetica, Genevea, sans-serif;
  overflow: hidden;
  }

Este script es una solución para usted, puede agregar controles para detener el desplazamiento cuando se alcance su límite.

​$('#up').click(function(){
    $('#PartnerEvents li').animate({top:'-=43'});
});
$('#down').click(function(){
    $('#PartnerEvents li').animate({top:'+=43'});
});

DEMO

contestado el 03 de mayo de 12 a las 17:05

tenga en cuenta que debe ser 43 píxeles porque su li tiene un margen inferior de 2 píxeles - ilyes kooli

¡Muy bien! He editado las necesidades de esto, según tu ejemplo. Necesito que se repita continuamente, es decir, cuando el último es visible, y luego se hace clic en el ciclo de regreso al primero. Actualmente, solo sigue agregando espacio si hace clic en anterior cuando el primero está visible y viceversa cuando el último está visible: Diseño de pájaro sucio

esto es lo que debe hacer: al hacer clic up, comprueba si el pasado li está dentro del área visible, verifique Desplazamiento de jQuery si es así, agregue el primer li después de él ahora solo usa tu cerebro para adivinar cómo hacer con el hacia abajo botón.. - ilyes kooli

Necesito un pequeño empujón aquí, creo que entiendo el concepto: verificar si el desplazamiento está dentro de un margen específico, si no, moverlo hacia arriba. ¿Definiría lo visible primero en una var y luego lo compararía? Realmente aprecio la ayuda y me gusta aprender de esta manera... espero que no sea un dolor de cabeza. - Diseño de pájaro sucio

aquí hay una solución de trabajo jsfiddle.net/BJdJ7/8 Realmente espero que intentes entenderlo y no solo usar mi código.. - ilyes kooli

<!-- language: lang-js -->  

var itemsToShow = 4;

$('#PartnerEvents>li').each(function(i,k) {
    var ele = $(this);
    $(ele).attr('id', 'PartnerEvents' + i);
    if (i >= itemsToShow) //i is zero indexed
    {
        $(ele).hide();
    }
});


$('#up').bind('click', function() {
    if ($('#PartnerEvents0:hidden').length > 0)
    {
        // This means we can go up
        var boundaryTop = $('#PartnerEvents li:visible:first').attr('id');
        var boundaryBottom = $('#PartnerEvents li:visible:last').attr('id');

        if ($('#PartnerEvents li#'+ boundaryTop).prev().length > 0)
        {
            $('#PartnerEvents li#'+ boundaryTop).prev().show();
            $('#PartnerEvents li#'+ boundaryBottom).hide();
        }
    }
});

$('#down').bind('click', function() {
    if ($('#PartnerEvents li:last:hidden').length > 0)
    {
        // This means we can go down
        var boundaryTop = $('#PartnerEvents li:visible:first').attr('id');
        var boundaryBottom = $('#PartnerEvents li:visible:last').attr('id');

        if ($('#PartnerEvents li#'+ boundaryBottom).next().length > 0)
        {
            $('#PartnerEvents li#'+ boundaryBottom).next().show();
            $('#PartnerEvents li#'+ boundaryTop).hide();
        }
}
});

contestado el 03 de mayo de 12 a las 17:05

Lo acabo de agregar en mi publicación principal, no estoy seguro de por qué la identificación no se mostró en jsfiddle: mark Smith

No funciona como se esperaba. Después de recorrer la lista, hacer clic hacia arriba es eliminar li's - jsfiddle.net/DirtyBirdDesign/BJdJ7/6 - Diseño de pájaro sucio

Tenga en cuenta que en la sección HTML las etiquetas a para los primeros 2 li no se cierran correctamente. Esto está causando el error. jsfiddle.net/BJdJ7/7 - mark Smith

Ahh, pegado descuidado de mi parte desde un archivo real a jsfiddle ... ¡gracias! Bueno, funciona, desafortunadamente no lo entiendo muy bien. Realmente lo aprecio, trataré de resolverlo. ¿Dónde/cómo se podría agregar una animación, simplemente deslizando hacia arriba/abajo? Diseño de pájaro sucio

No hay problema. Simplemente donde vea .hide() reemplácelo con .slideUp() y donde vea .show() reemplácelo con .slideDown() - mark Smith

No es la respuesta que estás buscando? Examinar otras preguntas etiquetadas or haz tu propia pregunta.