JavaScript / Jquery duvida

[mpmont]

Bom dia,

estou a fazer uma função que basicamente me adiciona ou remove classes a uma div e a uma lista... para com isto conseguir mudar a estrutura de um layout à medida que o utilizador clica num item da lista.

A coisa já funciona mas eu não sou lá grande coisa em jquery então a função está um pouco extensa e tem um bug que gostava que me ajudassem a resolver.

segue a função:

Código PHP:

    $("li.layout1").toggle(function(){
      $(this).addClass("block1"); 
      $("li.layout2").removeClass("block2");
      $("li.layout3").removeClass("block3");
      $("div.project").fadeOut("slow", function() {
        $(this).fadeIn("slow").removeClass("txt-img-grid");
        $(this).fadeIn("slow").removeClass("txt-grid");
          $(this).fadeIn("slow").addClass("img-grid");
         });
      }, function () {
      $(this).removeClass("block");
      $("ul.display").fadeOut("slow", function() {
          $(this).fadeIn("slow").removeClass("thumb_view1");
        });
    });
    $("li.layout2").toggle(function(){
      $(this).addClass("block2"); 
      $("li.layout1").removeClass("block1");
      $("li.layout3").removeClass("block3");
      $("div.project").fadeOut("slow", function() {
        $(this).fadeIn("slow").removeClass("img-grid");
        $(this).fadeIn("slow").removeClass("txt-grid");
          $(this).fadeIn("slow").addClass("txt-img-grid"); 
         });
      }, function () {
      $(this).removeClass("block");
      $("ul.display").fadeOut("slow", function() {
          $(this).fadeIn("slow").removeClass("thumb_view2");
        });
    }); 
    $("li.layout3").toggle(function(){
      $(this).addClass("block3"); 
      $("li.layout1").removeClass("block1");
      $("li.layout2").removeClass("block2");
      $("div.project").fadeOut("slow", function() {
        $(this).fadeIn("slow").removeClass("txt-img-grid");
        $(this).fadeIn("slow").removeClass("img-grid");
          $(this).fadeIn("slow").addClass("txt-grid"); 
         });
      }, function () {
      $(this).removeClass("block");
      $("ul.display").fadeOut("slow", function() {
          $(this).fadeIn("slow").removeClass("thumb_view3");
        });
    }); 


o que acontece é que quando clico num item da lista pela primeira vez tudo acontece como esperado, a class muda, no entanto se mudar para outra vista e dps voltar a clicar na primeira preciso de dois clicks para a coisa funcionar...

alguma sugestão?

[ark15]

Assim é complicado chegar lá, não podes disponibilizar mais código?!

[mpmont]

basicamente isto faz mudar em dois locais html:

Código PHP:

<ul class="layout-btn">
                            <li class="layout1 block1"><a href=""></a></li>
                            <li class="layout2"><a href=""></a></li>
                            <li class="layout3"><a href=""></a></li>
                        </ul> 


aqui muda apaga o block1 e cria um block2 no layout2...

Código PHP:

<div class="project img-grid"> 


e ao mesmo tempo tenho uma div onde vai ser modificada a class img-grid para txt-img-grid ou txt-grid consoante a escolha... a coisa funciona a primeira vez que uso mas dps quando tenho que mudar para uma class que ja usei antes ele precisa de dois clicks :/

[Bruno Bernardino]

Bem, antes de mais, parece-me que o toggle() não é a função mais indicada para utilizar aí.

http://api.jquery.com/toggle/

Deverias utilizar algo como o click() e definir/interpretar lá se é para esconder ou mostrar. Em princípio isso resolverá o teu bug, em que esperas que algumas coisas estejam escondidas ou visíveis mas durante o código escondes/mostras, sem callbacks.

[mpmont]

Perfeito Bruno! funcionou... =) Thanks

[mpmont]

tenho outra duvida, agora numa outra coisa que estou a tentar fazer...

então é assim,
o que quero fazer é muito simples em teoria, quero fazer fadeout --> fadeIn quando ha mudança de pagina. A parte do fadein é facil e já fiz, basicamente sempre que é carregada uma pagina eu coloco display: none na pagina com jquery e na mesma função faço fadeIn e fica bem. agora o que eu n sei fazer é o fadeOut.
Não estou a ver como é que eu faço a detecção de que foi clicado um href que vai para uma pagina externa para depois fazer o fadeOut..

E ainda tenho mais um problema que é não podem ser todos os href's porque tenho galerias e alguns não enviam para outra pagina.
Ou seja teria que ser com um ID em todos os links externos e dps esse ID é que servia para on click fadeOut e dps ir...

alguma ideia em como fazer isto?

ps: ainda estou a dar os primeiro passos em jquery... =)

[Bruno Bernardino]

podes fazer isso com classes ou rel's, que é o mais indicado, por exemplo:

Código:

<a href="#" rel="external">Link externo</a> | <a href="#">Link interno</a>

Depois terias um JS do tipo:

Código:

$('a[rel="external"]').click(function() { alert('este link vai para fora, fazer aqui o fadeOut'); })

Outra nota, se queres esconder algo, podes utilizar o hide() do jQuery, que basicamente coloca o display: none, mas sempre utilizas a framework na totalidade.

[mpmont]

ok, amanhã testo isso e digo como correu, a ideia do rel parece-me excelente =) thanks

[mpmont]

Não está a funcionar, não era suposto ser só assim?

Código PHP:

$('a[rel="external"]').click(function() { 
         $('div.wrapper').fadeOut('slow')}); 


[Bruno Bernardino]

Sim, mas qual é o teu código HTML?