Domanda

Sto cercando di ottenere un effetto di commutazione, ma non del tutto sicuro di come fare o cosa cercare. (I JAVE Jquery caricato).

assumere html simile 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>

Passi da fare

  1. Tutti i div sono riportati di
  2. Cliccando su un td per una data nasconderà tutti, ma il div con la classe del giorno fatto clic
  3. clic su "Tutte le date" mostrerà tutto ciò che di nuovo

idea di quanto ho potuto raggiungere questo obiettivo in modo pulito? idealmente utilizzando jQuery.

È stato utile?

Soluzione

Ecco un esempio di lavoro con jQuery.

Si noti che ho dovuto cambiare le vostre classi div e le etichette td per rimuovere gli spazi in modo che le etichette sarebbero equivalenti alle classi-nomi. Se non si desidera che trattini nelle etichette che si possa fare la manipolazione di stringhe in Javascript per rimuovere spazi bianchi o dare le tds lo stesso nome di classe come loro div corrispondente e poi guardare il nome di classe della td cliccato piuttosto che il suo interno-text. 

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

Altri suggerimenti

vorrei provare in questo modo: 

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();
});

Modifica ho scambiato .click() dentro per .live('click'). Se non ci sarebbero stati un sacco di righe, potrebbe essere meglio utilizzare .live() invece di legare un evento click() ad ogni td

Inoltre, il codice HTML che hai postato è un errore. Il div 03 manca un trattino prima del 2009

Identificare il <td>All Dates</td> unico. Assegnare la stessa classe o qualche altro identificativo per tutta la data <td>s. Dare loro un gestore di clic che nasconde tutti gli elementi .box ad eccezione di quello con la stessa data. Nel tuo esempio non sei coerente con una la data nel <td> lo stesso come il nome di classe della data nel vostro div, di cui avrete bisogno per quello che farò. 

<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();
         }
      });
   });
});
Autorizzato sotto: CC-BY-SA insieme a attribuzione
Non affiliato a StackOverflow
scroll top