Javascript Basculement
-
12-09-2019 - |
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
- Toutes les div de sont affichés
- En cliquant sur un td pour une date masquera tous, mais la div avec la classe de la journée cliqués
- en cliquant sur "Toutes les dates" montrera à nouveau tout
une idée que je pourrais proprement ce achive? idéalement en utilisant JQuery.
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 td
s 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();
}
});
});
});