Forum Pplware

Versão Completa: JavaScript / Jquery duvida
Está de momento a ver uma versão reduzida do nosso conteúdo. Ver versão completa com o formato adequado.
Páginas: 1 2
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?
Assim é complicado chegar lá, não podes disponibilizar mais código?!
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 :/
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.
Perfeito Bruno! funcionou... =) Thanks
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... =)
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.
ok, amanhã testo isso e digo como correu, a ideia do rel parece-me excelente =) thanks
Não está a funcionar, não era suposto ser só assim?
Código PHP:
$('a[rel="external"]').click(function() { 
         $(
'div.wrapper').fadeOut('slow')}); 
Sim, mas qual é o teu código HTML?
Páginas: 1 2
URL's de Referência