Ir para o conteúdo
  • Revista PROGRAMAR: Já está disponível a edição #60 da revista programar. Faz já o download aqui!

ultimate20

Encontrar Elemento Correcto / Alterar Campo

Mensagens Recomendadas

ultimate20

Boas !! Tenho o seguinte código HTML :

<table>
<tr>
<!-- class current altera um dado atributo da celula -->
<td class="current"><a href="javascript:showonlyone('div1');">LINK 1</a></td>
<td><a href="javascript:showonlyone('div2');">LINK 2</a></td>
<td><a href="javascript:showonlyone('div3');">LINK 3</a></td>
</tr>
</table>
<!--so a primeira div se encontra visivel no inicio -->
<div class="dives" id="div1">Div #1</div>
<div class="dives" id="div2">Div #2</div>
<div class="dives" id="div3">Div #3</div>

E o seguinte código Javascript:

<script type="text/javascript">
//change div according to the option choosen
function showonlyone(divescolhida) {
$('.dives').each(function(index) {
    if ($(this).attr("id") == divescolhida) {
    $(this).show(300);
    }
    else {
    $(this).hide(500);
    //$('td.current').removeClass('current'); //working
    }
});
}
</script>

Isto, o que faz é o seguinte: de acordo com o link clicado, a div que esta visivel troca; [link1-div1,...] .

O que quero é adicionar a classe current à célula correspondente ao link clicado . [ clique no link2, célula que contem o link 2 passa a ter a classe current ] .

Já tentei fazer isso adicionando id's, classes, fazendo algo parecido ao que faço para mostrar/esconder as divs, e nada, até acabei por me confundir mais.

Como da para ver pelo código, eu consigo remover a classe current do link antigo [ antigo current] , mas acho que ta um bocado à bruta, forçado xd.

Alguma sugestão ? Obrigado.

PS: Sorry for the long post !! ;)

Editado por brunoais

Partilhar esta mensagem


Ligação para a mensagem
Partilhar noutros sites
brunoais

Bem vindo ao p@p!

Post longo? Fazes o post desse tamanho porque é preciso! Fazes bem! (agora post longo.... ;) )

Pessoalmente, não gosto mesmo nada da maneira como estás a abordar o problema. Estás a dar voltas enormes para voltar ao mesmo sítio e estás a pesquisar no DOM demasiadas vezes.

Como da para ver pelo código, eu consigo remover a classe current do link antigo [ antigo current] , mas acho que ta um bocado à bruta, forçado xd.
Bem podes querer.

Bom... Queres jQuery, huh? Então se queres jQuery, pelo menos, que seja como deve ser!

Fora de qq função tens isto:

$('.dives').each(function(index) {

Usa o ready() e mete lá uma função que inclui esse código.

Agora, para cada um, tu queres apanhar o evento de qd o utilizador faz click naqueles div, certo? Bom... Com jQuery podes fazer assim:

var $links = $(document.getElementsByTagName('table')[0].document.getElementsByTagName('a')[0]);
var $dives = $('.dives');
$links.each(function(index) {
$thisLink = $(this);
$thisTr = $thisLink.parent();
   $thisLink.click(function (){
       var $this = $(this);
       if ($this.attr("id") == divescolhida) {
           $this.show(300);
           $thisTr.addClass('current')
       }else{
           $this.hide(500);
           $('td.current', $table).removeClass('current');
       }
   }
});

Isto nem está perto de ser o melhor que se pode fazer mas é aceitável e ainda há algum (pouco) código em falta e ainda uns pormenores que tens que corrigir. Eu fiz isso de propósito. Vê se consegues fazer ainda melhor e preencher o que falta como deve ser ;). Sem jQuery ainda se podia fazer melhor, mas parece-me que n é o que queres.

Experimenta este tipo de coisa e indica o que achas.

Ah! E apaga aqueles "href="javascript:showonlyone" não mistures js com HTML, muito má ideia.

Editado por brunoais

"[Os jovens da actual geração]não lêem porque não envolve um telecomando que dê para mirar e atirar, não falam porque a trapalhice é rainha e o calão é rei" autor: thoga31

Life is a genetically transmitted disease, induced by sex, with death rate of 100%.

Partilhar esta mensagem


Ligação para a mensagem
Partilhar noutros sites
ultimate20

Ora , vamos por partes que fiquei confuso.

O código acima não funciona ( e acho que não devia).

Agora, para cada um, tu queres apanhar o evento de qd o utilizador faz click naqueles div, certo? Bom... Com jQuery podes fazer assim:

Acho que não me fiz entender bem. Não quero apanhar o evento de quando o utilizador faz clique naquela div.

Quero o evento de quando o utilizador clica num link, que tem um dado id (por exemplo) , de forma a mostrar a div corresponde, e por sua vez alterar a classe da célula da tabela onde esse link se encontra. E remover a antiga claro.

Espero ter explicado correctamente agora.

Se pudesses comentar mais o código Javascript, podia ser que me ajudasse.

Obrigado . ;)

PS: é possível alterar o título de membro ? aparece a null xd

Editado por ultimate20

Partilhar esta mensagem


Ligação para a mensagem
Partilhar noutros sites
brunoais

Eu corrigi algumas coisas no código, eu enganei-me mesmo em de fazer em relação ao que querias feito, desculpa.

P.S. Isso do null é algo preprogramado e só podes alterar aumentando o nº de posts úteis que tens.

Editado por brunoais

"[Os jovens da actual geração]não lêem porque não envolve um telecomando que dê para mirar e atirar, não falam porque a trapalhice é rainha e o calão é rei" autor: thoga31

Life is a genetically transmitted disease, induced by sex, with death rate of 100%.

Partilhar esta mensagem


Ligação para a mensagem
Partilhar noutros sites
ultimate20

Este código não funciona:

var $links = $(document.getElementsByTagName('table')[0].document.getElementsByTagName('a')[0]);
var $dives = $('.dives');
$links.each(function(index) {
       $thisLink = $(this);
       $thisTr = $thisLink.parent();
   $thisLink.click(function (){
       var $this = $(this);
       if ($this.attr("id") == divescolhida) {
           $this.show(300);
           $thisTr.addClass('current')
       }else{
           $this.hide(500);
           $('td.current', $table).removeClass('current');
       }
   }
});

E já apaguei isto: "href="javascript:showonlyone".

Mas já estou a perceber melhor. Podes só explicar o início do código, até à segunda opção. Porque ainda não percebo como a função[sempre que é clicado um link da tabela ? ] é chamada nem como compara com o id do link [ o 'divescolhido'], se não é 'enviado.

Acho que estou a pensar muito em metodologias de outras linguagems. Hábito de Java e C++.

Thanks , ;)

Editado por thoga31
GeSHi

Partilhar esta mensagem


Ligação para a mensagem
Partilhar noutros sites
HappyHippyHippo
<!DOCTYPE html>
<html>
 <head>
   <meta id="test" http-equiv="Content-Type" content="text/html; charset=utf-8" />
   <script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
   <script type="text/javascript">
   $(document).ready(function() {
     $(".links li").click(function() {
       var selected = $(".selected");
       selected.removeClass("selected");
       $("#" + selected.attr("target")).hide();

       var link = $(this);
       link.addClass("selected");
       $("#" + link.attr("target")).show();
     });
   });
  </script>
  <style type="text/css">
    .links { margin: 0; padding: 0; }
    .links li { border: 1px solid black; list-style: none; padding: 2px 5px; }
    .links li.selected { background-color: #000; color: #fff; }
    .divs div { border: 1px solid black; display: none; }
  </style>
 </head>
 <body>
   <ul class="links">
     <li target="div1">link 1</li>
     <li target="div2">link 2</li>
     <li target="div3">link 3</li>
   </ul>
   <div class="divs">
     <div id="div1">div 1</div>
     <div id="div2">div 2</div>
     <div id="div3">div 3</div>
   </div>
 </body>
</html>


IRC : sim, é algo que ainda existe >> #p@p

Partilhar esta mensagem


Ligação para a mensagem
Partilhar noutros sites
brunoais

       $("#" + selected.attr("target")).hide();

       var link = $(this);
       link.addClass("selected");
       $("#" + link.attr("target")).show();

       $("#" + selected.attr("target"))

*facepalm*

Oh well... One can't win it all, huh? (nem sempre se ganha...)

Lá se vai o meu objetivo de só tentar ajudar a chegar ao resultado...

Editado por brunoais

"[Os jovens da actual geração]não lêem porque não envolve um telecomando que dê para mirar e atirar, não falam porque a trapalhice é rainha e o calão é rei" autor: thoga31

Life is a genetically transmitted disease, induced by sex, with death rate of 100%.

Partilhar esta mensagem


Ligação para a mensagem
Partilhar noutros sites
HappyHippyHippo

*facepalm*

Oh well... One can't win it all, huh? (nem sempre se ganha...)

Lá se vai o meu objetivo de só tentar ajudar a chegar ao resultado...

Podes só explicar o início do código, até à segunda opção. Porque ainda não percebo como a função[sempre que é clicado um link da tabela ? ] é chamada nem como compara com o id do link [ o 'divescolhido'], se não é 'enviado.

Acho que estou a pensar muito em metodologias de outras linguagems. Hábito de Java e C++.

isto não estava a ir a lado nenhum ...


IRC : sim, é algo que ainda existe >> #p@p

Partilhar esta mensagem


Ligação para a mensagem
Partilhar noutros sites
ultimate20

*facepalm*

Oh well... One can't win it all, huh? (nem sempre se ganha...)

Lá se vai o meu objetivo de só tentar ajudar a chegar ao resultado...

Obrigado pela ajuda ;) !!

Também acho e concordo que se deve ajudar a chegar ao resultado, do que, por vezes, 'força bruta'... Obrigado !!

isto não estava a ir a lado nenhum ...

não estava , mas podia chegar-se lá ..

mas há sempre quem não goste, enfim

obrigado anyway

Editado por ultimate20

Partilhar esta mensagem


Ligação para a mensagem
Partilhar noutros sites
ultimate20

<!DOCTYPE html>
<html>
 <head>
<meta id="test" http-equiv="Content-Type" content="text/html; charset=utf-8" />
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function() {
  $(".links li").click(function() {
	var selected = $(".selected");
	selected.removeClass("selected");
	$("#" + selected.attr("target")).hide();

	var link = $(this);
	link.addClass("selected");
	$("#" + link.attr("target")).show();
  });
});
  </script>
  <style type="text/css">
 .links { margin: 0; padding: 0; }
 .links li { border: 1px solid black; list-style: none; padding: 2px 5px; }
 .links li.selected { background-color: #000; color: #fff; }
 .divs div { border: 1px solid black; display: none; }
  </style>
 </head>
 <body>
<ul class="links">
  <li target="div1">link 1</li>
  <li target="div2">link 2</li>
  <li target="div3">link 3</li>
</ul>
<div class="divs">
  <div id="div1">div 1</div>
  <div id="div2">div 2</div>
  <div id="div3">div 3</div>
</div>
 </body>
</html>

By the way, este codigo nao faz nada. Simplesmente apresenta os tres textos.

Partilhar esta mensagem


Ligação para a mensagem
Partilhar noutros sites
brunoais

Ele quer fazer um sistema que semelha-se à lógica de tabs.

Ao inicio está tudo escondido. Depois, dependendo do da opção que é carregada, um conteúdo diferente é mostrado ao utilizador.

É isso, n é?

  • Voto 1

"[Os jovens da actual geração]não lêem porque não envolve um telecomando que dê para mirar e atirar, não falam porque a trapalhice é rainha e o calão é rei" autor: thoga31

Life is a genetically transmitted disease, induced by sex, with death rate of 100%.

Partilhar esta mensagem


Ligação para a mensagem
Partilhar noutros sites
ultimate20

Ele quer fazer um sistema que semelha-se à lógica de tabs.

Ao inicio está tudo escondido. Depois, dependendo do da opção que é carregada, um conteúdo diferente é mostrado ao utilizador.

É isso, n é?

Exactamente !! Desculpem lá se não foi bem explicíto ao início.

Partilhar esta mensagem


Ligação para a mensagem
Partilhar noutros sites
brunoais

Faltam-lhe alguns, poucos, pormenores importantes.

Acho que até pode ser um bom exercício para ele tentar perceber.


"[Os jovens da actual geração]não lêem porque não envolve um telecomando que dê para mirar e atirar, não falam porque a trapalhice é rainha e o calão é rei" autor: thoga31

Life is a genetically transmitted disease, induced by sex, with death rate of 100%.

Partilhar esta mensagem


Ligação para a mensagem
Partilhar noutros sites
ultimate20

Faltam-lhe alguns, poucos, pormenores importantes.

Acho que até pode ser um bom exercício para ele tentar perceber.

Exacto, assim que volte a este trabalho, coloco aqui mais avisos/dúvidas/informações.

e é isso que o meu código faz ...

Por muito que clica, seja onde for, não esconde nem mostra nada. Eu vou acabar por chegar lá.

Partilhar esta mensagem


Ligação para a mensagem
Partilhar noutros sites
HappyHippyHippo

Por muito que clica, seja onde for, não esconde nem mostra nada. Eu vou acabar por chegar lá.

o problema não é do código mas sim porque deverás ter erros de javascript que estoira com a aplicação e faz com que o código não seja executado

conclusão :

O site não está acessível pela net?


IRC : sim, é algo que ainda existe >> #p@p

Partilhar esta mensagem


Ligação para a mensagem
Partilhar noutros sites
ultimate20

o problema não é do código mas sim porque deverás ter erros de javascript que estoira com a aplicação e faz com que o código não seja executado

conclusão :

Não estou com erros de javascript, não. Dado que estou a executar o teu código numa única página, individualmente. Sozinho, como tu puseste.

O site não está acessível pela net?

E não, não está acessível pela net. Infelizmente, ainda não o posso colocar.

Partilhar esta mensagem


Ligação para a mensagem
Partilhar noutros sites
ultimate20

Experimenta meter o que tens no jsfiddle.net então

O código que tenho é semelhante ao código que coloquei no primeiro post.

Mas assim que tiver mais tempo, coloco aqui. Obrigado.

Partilhar esta mensagem


Ligação para a mensagem
Partilhar noutros sites
HappyHippyHippo

Não estou com erros de javascript, não. Dado que estou a executar o teu código numa única página, individualmente. Sozinho, como tu puseste.

o código que coloquei foi testado e funciona


IRC : sim, é algo que ainda existe >> #p@p

Partilhar esta mensagem


Ligação para a mensagem
Partilhar noutros sites
ultimate20

De volta..

Ja tenho isto a funcionar, mas não da maneira mais correcta. Juntamente com o código CSS, tenho isto:

<ul class="lista">
        <li title="div_1" class="dive current"><a href="#" >Titulo 1</a></li>
        <li title="div_2" class=dive"><a href="#" >Titulo 2</a></li>
        <li title="div_3" class="dive"><a href="#" >Titulo 3</a></li>
</ul>

$(document).ready(function(){

$("li.dive").click(function () { //clique em toda a area do item da lista
    $(".active").removeClass("active");«
    $(this).addClass("active");
    $(".conteudo").slideUp(); //conteudo e o nome da classe da div
    var conteudo_show = $(this).attr("title");
    $("#"+conteudo_show).slideDown();
});
});

Funciona como queria, mas não através do clique no link, mas sim no item da lista. Já tentei alterar no código para isto : $("li a.dive").click(function () por exemplo,e tentar trabalhar com os links, mas nada, vou dar sempre ao código 'antigo' que não funcionava.

E essa sim, acho que é a maneira mais correcta de fazer.

Sugestões ? Obrigado.

Editado por brunoais
geshi

Partilhar esta mensagem


Ligação para a mensagem
Partilhar noutros sites
brunoais

Tens o código na página exatamente como está aí?


"[Os jovens da actual geração]não lêem porque não envolve um telecomando que dê para mirar e atirar, não falam porque a trapalhice é rainha e o calão é rei" autor: thoga31

Life is a genetically transmitted disease, induced by sex, with death rate of 100%.

Partilhar esta mensagem


Ligação para a mensagem
Partilhar noutros sites
yoda

Como o @brunoais está provavelmente a tentar chamar-te à atenção, tens erros de atenção no código : http://jsfiddle.net/6uLrr/

Estavas a usar classes diferentes no html e javascript para marcar o item activo, falta de aspas nos atributos html, caracteres desnecessários, ... sintomas do uso de IDE's como o Dreamweaver.

Partilhar esta mensagem


Ligação para a mensagem
Partilhar noutros sites

Crie uma conta ou ligue-se para comentar

Só membros podem comentar

Criar nova conta

Registe para ter uma conta na nossa comunidade. É fácil!

Registar nova conta

Entra

Já tem conta? Inicie sessão aqui.

Entrar Agora

×

Aviso Sobre Cookies

Ao usar este site você aceita os nossos Termos de Uso e Política de Privacidade. Este site usa cookies para disponibilizar funcionalidades personalizadas. Para mais informações visite esta página.