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
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.

Share this post


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

Share this post


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

Edited by brunoais
geshi

Share this post


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

Share this post


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

Share this post


Link to post
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Restore formatting

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.


×
×
  • 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.