Pregunta

Estoy intentando conseguir un efecto de palanca, pero no muy seguro de cómo hacerlo o qué buscar. (I JAVE Jquery cargado).

asumir html similar a 

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

Pasos a seguir

  1. se muestran de Todos div
  2. Al hacer clic en un TD para una fecha ocultará todos, pero el div con la clase del día hizo clic
  3. clic en "Todas las fechas" mostrará todo de nuevo

alguna idea de cómo podría achive esta manera limpia? Lo ideal sería que el uso de jQuery.

¿Fue útil?

Solución

Este es un ejemplo de trabajo con jQuery.

Tenga en cuenta que tenía que cambiar sus clases y etiquetas div td para eliminar los espacios en blanco de manera que las etiquetas serían equivalentes a los nombres de clase. Si no desea guiones en las etiquetas que podría hacer la manipulación de cadenas en Javascript para eliminar espacios en blanco o dar los tds el mismo nombre de clase como su correspondiente div y luego ver el nombre de clase de la td hecho clic en lugar de su interior en 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>

Otros consejos

Me gustaría tratar de esta manera: 

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: Cambié .click() por .live('click'). Si no iba a haber un montón de filas, podría ser mejor usar .live() en lugar de unirse a un evento click() a cada td

Además, el código HTML que envió tiene un error. El div 03 falta un guión antes de la 2009

Identificar su <td>All Dates</td> única. Asignar la misma clase o algún otro identificador a todos su fecha <td>s. Dales un controlador de clic que oculta todos los elementos .box excepto el que tiene la misma fecha. En su ejemplo no está en consonancia con la fabricación de la fecha en el <td> el mismo que el nombre de la clase de la fecha de su divs, que lo que necesita para lo que haré. 

<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 bajo: CC-BY-SA con atribución
No afiliado a StackOverflow
scroll top