Jump to content
ultimate20

Encontrar Elemento Correcto / Alterar Campo

Recommended Posts

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 !! ;)

Edited by brunoais

Share this post


Link to post
Share on other 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.

Edited by 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%.

Share this post


Link to post
Share on other 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

Edited by ultimate20

Share this post


Link to post
Share on other 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.

Edited by 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%.

Share this post


Link to post
Share on other 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 , ;)

Edited by thoga31
GeSHi

Share this post


Link to post
Share on other 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

Share this post


Link to post
Share on other 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...

Edited by 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%.

Share this post


Link to post
Share on other 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

Share this post


Link to post
Share on other 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

Edited by ultimate20

Share this post


Link to post
Share on other 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.

Share this post


Link to post
Share on other 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 é?

  • Vote 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%.

Share this post


Link to post
Share on other 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.

Share this post


Link to post
Share on other sites
HappyHippyHippo

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

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


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

Share this post


Link to post
Share on other 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%.

Share this post


Link to post
Share on other 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á.

Share this post


Link to post
Share on other 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

Share this post


Link to post
Share on other 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.

Share this post


Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now

×
×
  • Create New...

Important Information

By using this site you accept our Terms of Use and Privacy Policy. We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue.