Pergunta

Eu estou tentando obter um efeito de alavanca, mas não tem certeza de como fazê-lo ou o que procurar. (I jave Jquery carregado).

assumir html semelhante ao 

<table class="left-dates">
    <tr><td>All Dates</td></tr>
    <tr><td>01 dec 2009</td></tr>
    <tr><td>02 dec 2009</td></tr>   
    <tr><td>03 dec 2009</td></tr>   
    <tr><td>04 dec 2009</td></tr>   
</table>

<div class="box 01-dec-2009">
    foo
</div>

<div class="box 03-dec 2009">
    bar
</div>

<div class="box 04-dec-2009">
    foobar
</div>

Passos a tomar

  1. Todos DIV são mostrados
  2. Ao clicar em um td para uma data irá esconder todos, mas o div com a classe do dia clicado
  3. clicar em "Todas as datas" mostrará tudo de novo

alguma idéia de como eu poderia obter este limpa? de preferência usando JQuery.

Foi útil?

Solução

Aqui está um exemplo de trabalho com jQuery.

Note que eu tinha que mudar suas classes div e etiquetas td para remover espaços em branco para que os rótulos seria equivalente à classe-nomes. Se você não quer traços nas etiquetas que você poderia fazer a manipulação de cadeia em JavaScript para remover espaço em branco ou dar as tds o mesmo nome de classe como seu div correspondente e depois olhar para o nome da classe do td clicado em vez de seu inner-texto. 

<html>
<head>
    <title>jQuery hiding example</title>

    <script type='text/javascript' src='http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js'></script>

    <script type='text/javascript'>
        $(document).ready(function(){
            $('td').click(function() {
                var target = $(this).text();
                if (target == 'All Dates') {
                    $('div.box').show();
                } else {
                    $('div.box').hide();
                    $('div.' + target).show();
                }
            });
        });
    </script>
</head>
<body>
    <table class="left-dates">
        <tr><td>All Dates</td></tr>
        <tr><td>01-dec-2009</td></tr>
        <tr><td>02-dec-2009</td></tr>       
        <tr><td>03-dec-2009</td></tr>       
        <tr><td>04-dec-2009</td></tr>       
    </table>

    <div class="box 01-dec-2009">
        foo
    </div>

    <div class="box 03-dec-2009">
        bar
    </div>

    <div class="box 04-dec-2009">
        foobar
    </div>
</body>
</html>

Outras dicas

Gostaria de tentar desta forma: 

var $boxes = $('div.box');

$('.left-dates td:gt(0)').click(function(e){
   var class = this.innerHTML.replace(/ /g, '-'); // Convert text to class
   $boxes.filter(':visible').not('.' + class).hide(); // All visible div.box that don't have the class we are going to show.
   $boxes.filter('.' + class).show(); // Show this class
});
$('.left-dates td:first').click(function(e){
   $boxes.show();
});

EDIT: eu troquei .click() dentro para .live('click'). Se havia vai ser uma tonelada de linhas, pode ser melhor usar .live() em vez de ligar um evento click() a cada td

Além disso, o HTML você postou tem um erro. O div 03 está faltando um hífen antes do 2009

Identifique o seu <td>All Dates</td> única. Atribuir a mesma classe ou algum outro identificador para toda sua data <td>s. Dê-lhes um manipulador de clique que esconde todos os elementos .box exceto aquele com a mesma data. No seu exemplo você não é consistente com tornando a data no <td> o mesmo que o nome da classe da data em suas divs, que você vai precisar para o que vou fazer. 

<table class="left-dates">
    <tr><td id="alldates">All Dates</td></tr>
    <tr><td id="date">01 dec 2009</td></tr>
    <tr><td id="date">02 dec 2009</td></tr>       
    <tr><td id="date">03 dec 2009</td></tr>       
    <tr><td id="date">04 dec 2009</td></tr>       
</table>

// unhide all box elements
$("#alldates").click(function(e){ $(".box").show(); });

// For each date <td> element
$("#date").each(function(){
   // assign a click event
   $(this).click(function(e){
      // when the user clicks, get the
      // <td>'s text contents
      var myval = $(this).text();
      // and grab each element with the
      // 'box' css class
      $(".box").each(function(){
         // for each of these 'box' elements,
         // if it has a class matching the date
         // they selected, return
         if($(this).has(myval))
         {
            return;
         }
         else
         {
            // otherwise, hide itself
            $(this).hide();
         }
      });
   });
});
Licenciado em: CC-BY-SA com atribuição
Não afiliado a StackOverflow
scroll top