[SOLUCIONADO] Pasar de un li a otro

[manelmanel8]

Me gustaría que al hacer clic sobre una flecha o la otra pase al otro li, alguna idea?

Gracias.

Código HTML:

<a href="#" class="leftBtn"><i class="fa fa-angle-left fa-4x"></i></a>
     <ul>
            <li  id="1">
                   <div class="info">
                            <h3>Un toque de fachada</h3>
                   </div>
             </li>
            <li  id="2">
                   <div class="info">
                            <h3>Un toque de fachada</h3>
                   </div>
             </li>
            <li  id="3">
                   <div class="info">
                            <h3>Un toque de fachada</h3>
                   </div>
             </li>
     </ul>
<a href="#" class="rightBtn"><i class="fa fa-angle-right fa-4x"></i></a> 

[Alexis88]

Cuando dices "Me gustaría que al hacer clic sobre una flecha o la otra pase al otro li", ¿a qué te refieres exactamente? ¿A que el siguiente elemento <li> tome el enfoque? ¿A que se mueva? ¿A que tome un color diferente para indicarle al usuario que ahora vea a ese?

Saludos

[GeekGirl]

Si lo que querés es cambiar el li activo (al menos yo entendí eso) podrías hacer algo como esto:

Código HTML:

 <a href="#" class="leftBtn"><i class="fa fa-angle-left fa-4x"></i></a>
     <ul>
            <li  id="1" class="active">
                   <div class="info">
                            <h3>Un toque de fachada 1</h3>
                   </div>
             </li>
            <li  id="2">
                   <div class="info">
                            <h3>Un toque de fachada 2</h3>
                   </div>
             </li>
            <li  id="3">
                   <div class="info">
                            <h3>Un toque de fachada 3</h3>
                   </div>
             </li>
     </ul>
	<a href="#" class="rightBtn"><i class="fa fa-angle-right fa-4x"></i></a> 

Código Javascript:

$(document).ready(function(){
        $(".leftBtn, .rightBtn").click(function(e){
            e.preventDefault();
            var accion = $(this).hasClass("leftBtn") ? "restar" : "sumar";
            
            $.each( $("li"), function() {
              if ($(this).attr("class") == "active") {
                $(this).removeClass("active");
                var liId = parseInt($(this).attr("id"));
                
                if (accion == "sumar") {
                    liId++;
                } else {
                    liId--;
                }
                
                if (liId > $("li").length) {
                    liId = 1;
                } else if (liId < 1) {
                    liId = 3;
                }
                
                $("#" + liId).addClass("active");
                return false;
              }
            });
        });
    });
 

Deberías definir con CSS si esa clase active da un determinado color de fondo o lo que necesites hacer.

Seguramente habrá formas más óptimas de hacer el código, pero un domingo a esta hora mucho más no pude hacer :P

Saludos

[Alexis88]

Otra opción:

Código HTML:

<ul>
    <li class = "focus">Ítem 1</li>
    <li>Ítem 2</li>
    <li>Ítem 3</li>
</ul>
<label id = "at">Atrás</label>
<label id = "ad">Adelante</label>
 

Código CSS:

.focus{
    border: .1rem cornflowerblue solid;
}
 

Código Javascript:

//Para avanzar
$("#ad").on("click", function(){
    var actual = $("li.focus"),
        sig = actual.next().is("li") ? actual.next() : $("li").first();
    actual.removeClass("focus");
    sig.addClass("focus");
});
 
//Para retroceder
$("#at").on("click", function(){
    var actual = $("li.focus"),
        sig = actual.prev().is("li") ? actual.prev() : $("li").last();
    actual.removeClass("focus");
    sig.addClass("focus");
});
 

De esta forma, para el botón de avance, tomas al siguiente elemento <li> o al primero en caso de haber llegado al final, se retira la clase focus del elemento actual y se la asigna la siguiente. Para el botón de retroceso, el proceso es inverso, solo cambian los métodos para obtener al elemento <li> anterior o al último, según sea el caso.

DEMO

Saludos

[manelmanel8]

Perdón por no contestar, gracias a todos por contestar estuve fuera de casa.

Voy a probar vuestros códigos.

Gracias

[manelmanel8]

Tengo un problema, a ver si lo explico bien.

Tengo un primer div con 6 li al hacer clic en un li guardo su posición en la variable position y la utilizo para cargar el li del otro div. Si en el primer div hago clic en el li 1, en el otro segundo div cargo el li 1.

Código Javascript:

$(".cosas li").click(function() {
            var position = $(this).index();
            $(".cosas").hide(); 
            $(".systems-gallery").show();
            $(".systems-gallery li").hide();
            $(".systems-gallery li:eq("+ position +")").show();     
                    return position;
        });
 

El problema como utilizar la variable position en esta función?

Código Javascript:

$(".rightBtn").click(function() {
 
        });
 

Saludos

[Alexis88]

Te conviene tener a esa variable en un ámbito global (declárala fuera del método), de manera que luego puedes trabajar con dicho valor en la función a la que haces mención.

Por cierto, ya no sería necesario que retornes el valor.

Saludos

[manelmanel8]

Lo de la variable global funciono perfecto, tengo el último problema y ya lo tendré perfecto.

La lista la tengo oculta y cuando apretó al botón siguiente hago aparecer el siguiente li con show. Como podría hacer para ocultar el li anterior. Es decir si apretó y voy al li 4, quiero ocultar el li 3.

Código Javascript:

$(".rightBtn").click(function() {
            var actual = $("li.focus"),
            sig = actual.next().is("li") ? actual.next() : $("li").first();
            actual.removeClass("focus");
            sig.addClass("focus");      
            $(".focus").show();         
        });
 

Esta línea no la acabo de entender, bueno el ? y los :

Código Javascript:

sig = actual.next().is("li") ? actual.next() : $("li").first();
 

Gracias por vuestra ayuda.

[GeekGirl]

Código Javascript:

sig = actual.next().is("li") ? actual.next() : $("li").first();
 

Esa línea que no entendiste es un operador ternario. Es una versión resumida de un if. Lo que significa es que si el siguiente elemento del li actual es otro li, que levante el siguiente li para avanzar, y sino, el primero de ellos. Por qué hace esto? Porque cuando llegues al último li, si haces un next(), el siguiente elemento va a ser la ul y no un li.

Para ocultar podrías hacer algo así:

Código Javascript:

$(".rightBtn").click(function() {
            var actual = $("li.focus"),
            sig = actual.next().is("li") ? actual.next() : $("li").first();
            actual.removeClass("focus");
            actual.hide(); // Acá ocultas
            sig.addClass("focus");      
            $(".focus").show();         
        });
 

Saludos :)

[Alexis88]

Como bien te lo dijo GeekGirl, es un operador ternario, el cual funciona así:

Código Bash:

condición ? verdadero : falso
 

Por lo que esto:

Código Javascript:

sig = actual.next().is("li") ? actual.next() : $("li").first();
 

Puedes tenerlo así:

Código Javascript:

if (actual.next().is("li")){
    sig = actual.next();
}
else{
    sig = $("li").first();
}
 

Para lo otro, pues, ya te lo dijeron. Y para cuando retrocedas, sería exactamente lo mismo, es decir, tendrías que ocultar al elemento actual.

Saludos

[manelmanel8]

Tienes razón cuando llego al final, luego no aparece el primer li.

He probado diferentes cosas y no consigo mostrar el primer li, la última cosa que probé fue lo siguiente, añadiendo al li firt la clase focus pero nada de nada.

¿Qué hace falta para cuando llegue al último vuelva a empezar?

Gracias

Código Javascript:

$(".rightBtn").click(function() {
            var actual = $("li.focus"),
            sig = actual.next().is("li") ? actual.next() : $("li").first().addClass("focus");
            actual.removeClass("focus");
            actual.hide();
            sig.addClass("focus");      
            sig.show();         
        });
 

[Alexis88]

No debes de agregar la clase en esa parte, recuerda que ahí solo estás tomando al siguiente elemento o al primero si estás en el final. Fíjate que más abajo se le añade la clase.

Saludos

[manelmanel8]

Ya, era una prueba... Lo que no entiendo es porque cuando llega al final no vuelve al principio.

La única diferencia es que tengo los li al principio en hide y muestro cada li al hacer clic

Código Javascript:

$(".rightBtn").click(function() {
            var actual = $("li.focus"),
            sig = actual.next().is("li") ? actual.next() : $("li").first();
            actual.removeClass("focus");
            actual.hide();
            sig.addClass("focus");      
            sig.show();         
        });
 

[GeekGirl]

No te funciona? Probé el mismo código que pegaste y me anduvo sin problema alguno.
Pasanos el HTML también tal cual como está así podemos ver el problema.

[manelmanel8]

El motivo no entiendo porque no funciona.

Código HTML:

<section class="content">
        <div class="general-cosas">
        <p class="label">Características</p>
        <h3>Hola</h3>
        <p>universal</p>
            <article class="cosas">
                <ul class="systems">
                    <li>
                        <figure>
                            <div>
                              <img src="images/li1.jpg" height="285px"/> 
                                <a href="#" class="readmoreBtn"><i class="fa fa-plus-square-o fa-4x"></i></a>
                                <figcaption>
                                    <div class="title-box">
                                        <h2 class="overtext">1<br>Cuadro</h2>
                                    </div>
                                </figcaption>
 
                            </div>
                        </figure>
                    </li>
                    <li>
                        <figure>
                            <div>
                              <img src="images/li1.jpg" height="285px"/>    
                                <a href="#" class="readmoreBtn"><i class="fa fa-plus-square-o fa-4x"></i></a>                             
                                <figcaption>
                                    <div class="title-box">
                                        <h2 class="overtext">2<br>Cuadro</h2>
                                    </div>
                                </figcaption>
                            </div>
                        </figure>
                    </li>
                    <li>
                        <figure>
                            <div>
                              <img src="images/li1.jpg" height="285px"/>   
                                <a href="#" class="readmoreBtn"><i class="fa fa-plus-square-o fa-4x"></i></a>                                 
                                <figcaption>
                                    <div class="title-box">
                                        <h2 class="overtext">3<br>Cuadro</h2>
                                    </div>
                                </figcaption>
                            </div>
                        </figure>
                    </li>
                    <li>
                        <figure>
                            <div>
                              <img src="images/li1.jpg" height="285px"/>   
                                <a href="#" class="readmoreBtn"><i class="fa fa-plus-square-o fa-4x"></i></a>                                 
                                <figcaption>
                                    <div class="title-box">
                                        <h2 class="overtext">4<br>Cuadro</h2>
                                    </div>
                                </figcaption>
                            </div>
                        </figure>
                    </li>
                    <li>
                        <figure>
                            <div>
                              <img src="images/li1.jpg" height="285px"/>  
                                <a href="#" class="readmoreBtn"><i class="fa fa-plus-square-o fa-4x"></i></a>                                 
                                <figcaption>
                                    <div class="title-box">
                                        <h2 class="overtext">5<br>Cuadro</h2>
                                    </div>
                                </figcaption>
                            </div>
                        </figure>
                    </li>
                    <li>
                        <figure>
                            <div>
                              <img src="images/li1.jpg" height="285px"/>    
                                <a href="#" class="readmoreBtn"><i class="fa fa-plus-square-o fa-4x"></i></a>   
                                <figcaption>
                                    <div class="title-box">
                                        <h2 class="overtext">6<br>Cuadro</h2>
                                    </div>
                                </figcaption>
                            </div>
                        </figure>
                    </li>
                </ul>
            </article>
            <article class="systems-gallery">
                <span class="close-systems-container"><i class="fa fa-close fa-3x"></i></span>
                <div class="systems-container">
                    <label class="leftBtn"><i class="fa fa-angle-left fa-4x"></i></label>
                    <ul>
                        <li>
                            <div class="info">
                                <h3>Nuevo cuadro 1</h3>
                            </div>
                        </li>
                        <li>
                            <div class="info">
                                <h3>Nuevo cuadro 2</h3>
                            </div>
                        </li>
                        <li>
                            <div class="info">
                                <h3>Nuevo cuadro 3</h3>
                            </div>
                        </li>
                        <li>
                            <div class="info">
                                <h3>Nuevo cuadro 4</h3>
                            </div>
                        </li>   
                        <li>
                            <div class="info">
                                <h3>Nuevo cuadro 5</h3>
                            </div>
                        </li>
                        <li>
                            <div class="info">
                                <h3>Nuevo cuadro 6</h3>
                            </div>
                        </li>                           
                    </ul>
                    <label class="rightBtn"><i class="fa fa-angle-right fa-4x"></i></label>                    
                </div>
            </article>
        </div>
    </section>
 

Código Javascript:

var position;
 
$(".systems-gallery").hide();       
        $(".cosas li").click(function() {
            position = $(this).index();
            $(".cosas").hide(); 
            $(".systems-gallery").show();
            $(".systems-gallery li").hide();
            $(".systems-gallery li:eq("+ position +")").show(); 
            $(".systems-gallery li:eq("+ position +")").addClass("focus");          
        }); 
                    
        $(".close-systems-container").click(function() {
            $(".systems-gallery").hide();   
            $(".cosas").show();            
        }); 
        
        $(".rightBtn").click(function() {
            var actual = $("li.focus"),
            sig = actual.next().is("li") ? actual.next() : $("li").first();
            actual.removeClass("focus");
            actual.hide();
            sig.addClass("focus");      
            sig.show();         
        });
 

[GeekGirl]

No funciona porque en tu HTML tenés otros li además de los que necesitás. Haciendo un pequeño cambio anda sin problemas. Agregá un identificador a la ul contenedora de los li que querés ir intercambiando:

Código HTML:

 <ul id="listaCuadros">
                        <li>
                            <div class="info">
                                <h3>Nuevo cuadro 1</h3>
                            </div>
                        </li>
                        <li>
                            <div class="info">
                                <h3>Nuevo cuadro 2</h3>
                            </div>
                        </li>
                        <li>
                            <div class="info">
                                <h3>Nuevo cuadro 3</h3>
                            </div>
                        </li>
                        <li>
                            <div class="info">
                                <h3>Nuevo cuadro 4</h3>
                            </div>
                        </li>   
                        <li>
                            <div class="info">
                                <h3>Nuevo cuadro 5</h3>
                            </div>
                        </li>
                        <li>
                            <div class="info">
                                <h3>Nuevo cuadro 6</h3>
                            </div>
                        </li>                           
                    </ul> 

Y luego modificá en el JS de la siguiente manera:

Código Javascript:

sig = actual.next().is("li") ? actual.next() : $("#listaCuadros li").first();
 

No te pasaba al primero, porque estaba tomando el primer elemento li del documento, que no es el primer li de tus cuadros.

Saludos :)

[manelmanel8]

Gracias a todos por vuestro tiempo.

Solucionado