Frage

Ich versuche, einen Toggle-Effekt zu erhalten, aber nicht ganz sicher, wie es zu tun oder etwas zu suchen. (I Jave Jquery geladen).

annehmen html ähnlich wie 

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

Schritte zu ergreifen,

  1. Alle divs gezeigt werden
  2. für ein Datum auf einer td Ein Klick auf alle, aber die div mit der Klasse des Tages verstecken geklickt haben
  3. „Alle Termine“ klicken alles zeigen wird wieder

eine Idee, wie ich das sauber achive könnte? idealerweise mit JQuery.

War es hilfreich?

Lösung

Hier ist ein funktionierendes Beispiel mit jQuery.

Beachten Sie, dass ich auf Ihre div Klassen und td Etiketten ändern Leerzeichen zu entfernen, so dass die Etiketten auf den Klassennamen entsprechen würde. Wenn Sie keine Bindestriche in den Etikett wollten konnte man String-Manipulation in Javascript tut white-space zu entfernen oder den tds den gleichen Klassennamen wie ihre entsprechenden div geben und dann auf dem Namen der Klasse des angeklickten td aussehen, anstatt sein innerer 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>

Andere Tipps

Ich würde versuchen, es so aus: 

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: Ich tauschte .click() in für .live('click'). Wenn es eine Tonne Reihen sein würde, könnte es besser sein .live() zu verwenden, anstatt ein click() Ereignisses zu jedem td der Bindung

Auch die HTML Sie auf dem Laufenden hat einen Fehler. Die 03 div ist ein Bindestrich vor dem 2009 fehlt

Identifizieren Sie Ihre <td>All Dates</td> eindeutig. Ordnen Sie die gleiche Klasse oder eine andere Kennung auf all Ihren Daten <td>s. Geben Sie ihnen einen Click-Handler, der alle .box Elemente mit Ausnahme der mit dem gleichen Datum verbirgt. In Ihrem Beispiel sind Sie mit macht das Datum im <td> der gleichen wie der Klassenname des Datums in Ihrem divs nicht konsistent, die Sie brauchen, was ich tun werde. 

<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();
         }
      });
   });
});
Lizenziert unter: CC-BY-SA mit Zuschreibung
Nicht verbunden mit StackOverflow
scroll top