Question

Je suis en train d'obtenir un effet de bascule, mais pas tout à fait sûr de savoir comment faire ou ce qu'il faut chercher. (I Javé Jquery chargé).

similaire à assumer html 

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

Mesures à prendre

  1. Toutes les div de sont affichés
  2. En cliquant sur un td pour une date masquera tous, mais la div avec la classe de la journée cliqués
  3. en cliquant sur "Toutes les dates" montrera à nouveau tout

une idée que je pourrais proprement ce achive? idéalement en utilisant JQuery.

Était-ce utile?

La solution

Voici un exemple de travail avec jQuery.

Notez que je devais changer vos classes div et les étiquettes de td pour supprimer les espaces de sorte que les étiquettes soient équivalentes aux noms de classe. Si vous ne voulez pas des tirets dans les étiquettes que vous pourriez faire la manipulation de chaînes en Javascript pour enlever l'espace blanc ou donner les tds même classname que leur div puis regarder le classname du td cliqué plutôt que son texte interne correspondant. 

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

Autres conseils

Je voudrais essayer cette façon: 

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: J'ai troqué .click() dans pour .live('click'). S'il devait y avoir une tonne de lignes, il pourrait être préférable d'utiliser .live() au lieu de lier un événement click() à chaque td

En outre, le code HTML mis en ligne a une erreur. Le div 03 manque un trait d'union avant la 2009

Identifier votre <td>All Dates</td> unique. Assignez la même classe ou un autre identifiant à toute date <td>s. Donnez-leur un gestionnaire de clic qui cache tous les éléments de .BOX, sauf celui avec la même date. Dans votre exemple, vous n'êtes pas compatible avec une date dans le <td> le même que le nom de la classe de la date dans votre divs, que vous aurez besoin pour ce que je vais le faire. 

<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();
         }
      });
   });
});
Licencié sous: CC-BY-SA avec attribution
Non affilié à StackOverflow
scroll top