4

Estou tentando fazer com que ao clicar no link "próximo", uma das minhas listas seja revelada e a anterior seja ocultada, usando uma classe que possui display: none;, tentei com .next() do jQuery mas ocorreram alguns problemas, como, por exemplo, numa div com 3 ULs ele pular do primeiro para o último.

http://jsfiddle.net/5kkxy/

<div class="content">
<a href="#" class="prev">anterior</a>

    <div class="representante-info">
        <div id="#rep-info" class="texto">
            <ul>
                <li>
                    <h2>foo LTDA</h2>
                </li>
                <li>End: Alameda dos Anjos 233, São Caetano do Sul - SP</li>
                <li>Cep: 1234-000</li>
                <li>Fone: (11) 1234-0000</li>
                <li>Site: www.foo.com.br</li>
                <li>E-mail: [email protected]</li>
            </ul>
            <ul class="hidden">
                <li>
                    <h2>FOO LTDA</h2>
                </li>
                <li>End: Rua do Bosque, 222, São Paulo - SP</li>
                <li>Cep: 1234-000</li>
                <li>Fone: (19) 8845-9897</li>
                <li>Site: www.foo.com.br</li>
                <li>E-mail: [email protected]</li>
            </ul>
            <ul class="hidden">
                <li>
                    <h2>Jhon Doe</h2>
                </li>
                <li>Rua Plesk, 400 São paulo - SP</li>
                <li>Cep: 1234-000</li>
            </ul>
        </div>
    </div>
    <!-- /.representante-info --> <a href="#" class="next">proximo</a>

</div>

CSS:

.content {
    width: auto;
    height: 750px;
    margin: 0 auto;
}
.content a.prev, a.next {
    float: left;
    display: block;
    width: 31px;
    height: 27px;
    color: #f26;
    position: relative;
}
.content a.prev {
    background-image: url(../assets/img/setas.png);
    background-repeat: no-repeat;
    background-position: 0 0;
    top: 50px;
    margin: 0 10px 0 0;
}
.content a.next {
    background-image: url(../assets/img/setas.png);
    background-repeat: no-repeat;
    background-position: 0 -27px;
    top: 50px;
    margin: 0 0 0 10px;
}
.content .representante-mapa {
    width: 850px;
    height: 560px;
}
.content .representante-info {
    width: 650px;
    height: 134px;
    background-color: #df6225;
    background-image: url(../assets/img/rep-map-info.png);
    background-position: -1% 50%;
    background-repeat: no-repeat;
    margin: 0 auto;
    float: left;
}
.content .representante-info .texto {
    width: 328px;
    height: 100%;
    margin: 0 0 0 60px;
}
.content .representante-info .texto ul {
    list-style-type: none;
    margin: 0;
    padding: 0 0 0 20px;
}
.content .representante-info .texto ul.hidden {
    display: none;
}
.content .representante-info .texto ul li {
    font-family:'helvetica neue', arial, sans-serif;
    font-size: 14px;
    color: #fff;
}
.content .representante-info .texto ul li h2 {
    font-family: arial, serif;
    text-transform: uppercase;
    font-size: 16px;
    color: #fff;
    padding: 0;
    margin: 0;
}

3 Respostas 3

7

Se o teu problema está no código em jQuery, devias ter o mesmo na pergunta!

Problema no HTML

Tens um problema no HTML, o id do teu elemento que envolve as diversas listas contém o caracter # a mais:

<div id="#rep-info" class="texto">

Deveria ser:

<div id="rep-info" class="texto">

Navegação em ciclo com jQuery

Para que possas navegar "em circulo" pelas diversas listas, tens que ir andando para o elemento seguinte, mas verificar se o elemento atual é ou não o último, para que possas voltar para o primeiro elemento, criando assim o loop desejado. O mesmo se aplica se estiveres a usar a navegação ao contrário.

Exemplo a funcionar no JSFiddle

var $list = $('#rep-info'); // elemento que contém as ULs

$('.prev, .next').on("click", function(e) {
    e.preventDefault();

    var $item = $list.find('ul:not(.hidden)'); // apanha quem está visivel

    $item.addClass('hidden'); // esconde todos

    if ($(this).hasClass('next')) { // andar para o próximo
        if ($item.is(':last-child')) { // se for a última UL
            $list.find('ul:first-child').removeClass('hidden');
        } else {
            $item.next().removeClass('hidden');
        }
    } else { // andar para o anterior
        if ($item.is(':first-child')) { // se for a primeira UL
            $list.find('ul:last-child').removeClass('hidden');
        } else {
            $item.prev().removeClass('hidden');
        }
    }
});
4
  • +1 por boa solução e pelo erro da ID :)
    – Sergio
    19/02/2014 às 22:30
  • @Zuul muito obrigado por sua resposta, você pensou em todos os detalhes. inclusive me pontuou sobre meu erro na ID do elemento!
    – Leandro RR
    20/02/2014 às 1:34
  • deve ser a melhor solução porém eu te juro que eu não entendi nada, kkkkk :/ 20/02/2014 às 1:37
  • é porque cada um tem um jeito diferente de chegar a uma solução, na lógica dele tá bem perto do que eu já estava tentando antes, mas a sua também funciona. aqui o projeto como está ficando bit.ly/1gXSuO8
    – Leandro RR
    20/02/2014 às 1:53
5

Aqui vai uma outra alternativa, usando só a classe hidden como sugeriu:

$('.next, .prev').on('click', function (event) {
    event.preventDefault();
    trocar($(this).hasClass('next')); // chama a função passando true ou false consoante seja o botao next ou prev
});

function trocar(index) {
    var ul = $('ul');   // por em cache todos os ul
    var visivel;        // iniciar a variavel que vou usar para saber qual está visivel, ie: não hidden
    ul.each(function (i) { // um ciclo para verificar todos os ul
        if (!$(this).hasClass('hidden')) {  // no caso de não ter a classe
            if (!index && i == 0) {         // no caso de prev e ser o primeiro elemento
                visivel = ul.length - 1;    // dar o index do ultimo elemento à variavel "visivel"
            } else if (index && i == ul.length - 1) { // no caso de proximo e de ser o ultimo elemento
                visivel = 0;  // voltar ao principio
            } else {
                visivel = i + (index ? 1 : -1); // casos intermédios
            }
        }
    })
    ul.addClass('hidden'); // esconder todos
    ul.eq(visivel).removeClass('hidden'); // não esconder o escolhido como visivel
};

Exemplo

No exemplo está uma versão melhorada do código. Comprimido pelo Zuul™

6
  • Não consigo fazer clique com o meu rato para votar na tua resposta... acho que está relacionado com a ausência de uma explicação superficial do código! ;)
    – Zuul
    19/02/2014 às 22:15
  • Os ratos suecos são muito melhores :) Mas vou acrescentar uns comentários agora que consegui comprimir o código mais um bocadinho :)
    – Sergio
    19/02/2014 às 22:17
  • @Zuul, já editei. Dá uma olhada e edita o que achares :))
    – Sergio
    19/02/2014 às 22:22
  • Eu só "comprimia" os dois eventos de click para um só de forma a reduzir mais o código, algo tipo: $(this).hasClass("next") ? troca(1) : troca(0), mas +1
    – Zuul
    19/02/2014 às 22:28
  • @Zuul, boa ideia. Só tenho medo de haver outros <a>.
    – Sergio
    19/02/2014 às 22:31
2

Você pode sim, fazer utilizando o .next() do e também o .prev() porém terá de verificar se há um próximo/anterior elemento antes de sair fazendo o que tem de fazer, e também mudei algumas coisas no HTML, no caso o código seria este:

$('.next').click(function(){
    var el = $('.active');
    if (el.next().length > 0){
        el.addClass('hidden');
        el.next().removeClass('hidden');
        el.next().addClass('active');
        el.removeClass('active');
    }
});

$('.prev').click(function(){
    var el = $('.active');
    if (el.prev().length > 0){
        el.addClass('hidden');
        el.prev().removeClass('hidden');
        el.prev().addClass('active');
        el.removeClass('active');
    }
});

E sobre o HTML, você tem que colocar um <ul class=active> por padrão, ou seja, tens que deixar um dos <ul> com a classe "active" ao carregar a página.

Exemplo funcionando no JSFiddle

1
  • 1
    obrigado pelo esforço :)
    – Leandro RR
    20/02/2014 às 1:36

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .