Javascript Toggle

J'essaie d'obtenir un effet de bascule, mais je ne sais pas trop comment le faire ou quoi chercher. (J'ai jave Jquery chargé).Javascript Toggle

assumer html similaire à

<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

Tous les DIV sont présentés
En cliquant sur un td pour une date masquera tous, mais la div avec la classe de le jour cliqué
en cliquant sur "Toutes les dates" montrera tout à nouveau

aucune idée comment je pourrais réaliser cela proprement? idéalement en utilisant JQuery.

Source

2009-12-04 Shadi Almosri

Voici un exemple de travail avec jQuery.

Notez que j'ai dû modifier vos classes div et les étiquettes td pour supprimer les espaces afin que les étiquettes soient équivalentes aux noms de classe. Si vous ne voulez pas de tirets dans les étiquettes, vous pouvez manipuler des chaînes en Javascript pour supprimer les espaces blancs ou donner td s le même nom de classe que leur div correspondant, puis regarder le nom de classe du td cliqué plutôt que son texte interne .

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

Source

2009-12-04 02:15:11

mise à jour: Ajout d'un cas pour 'Toutes les dates'. –

Rapide et propre, j'ai implémenté une version piratée de ceci mais vous m'avez donné toutes les informations dont j'avais besoin, merci. Accepté :) –

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: Je 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 le 2009

Source

2009-12-04 02:04:39

Je viens de poster une petite correction à mon code. La fonction de remplacement ne trouvait que le premier espace, pas tous les espaces. –

Grande surcharge pour un sélecteur en direct. Il fonctionnera sur chaque événement de clic de document. Il est préférable de garder tous les événements en direct à des sélecteurs simples, sinon utiliser la délégation d'événements natifs – redsquare

Je pensais que jusqu'à ce que j'ai assisté à #jqcon à Boston et a été dit autrement par les membres de l'équipe de base. 'live' est étonnamment plus rapide et plus simple que de lier une méthode de clic séparée à chaque événement. –

Identifiez votre <td>All Dates</td> uniquement. Assignez la même classe ou un autre identifiant à toute votre date <td>s. Donnez-leur un gestionnaire de clic qui cache tous les éléments .box sauf celui avec la même date. Dans votre exemple, vous n'êtes pas cohérent avec la date dans le <td> le même que le nom de la classe de la date dans vos divs, dont vous aurez besoin pour ce que je vais 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(); 
     } 
     }); 
    }); 
});

Source

2009-12-04 02:18:55

Javascript Toggle

Répondre

Questions connexes