filtres jQuery multiples case à cocher

voix
1

J'ai une liste d'événements, ces événements sont chacun d'un type spécifique, et commencer dans un mois donné. J'ai un groupe de cases à cocher pour les types et l'un des mois. Ce que je suis en train de faire est d'utiliser les cases à cocher pour filtrer la liste. Je l'ai travailler avec un groupe, mais ne peut pas sembler le faire fonctionner avec deux.

Fondamentalement, je suis en train de définir une classe quand je cache l'élément de liste, donc je sais à quel groupe l'a caché, mais il semble se confondre. Les noms de classe sont corrects mais certains parfois éléments ne sont pas présentés à nouveau.

Si quelqu'un peut voir ce que je fais mal, ou penser à une meilleure solution, ce serait génial! Merci!

Darren.

Mon JavaScript:

$(#options input.type_check).change(function() {
    if($(this).is(':checked')) {
        $(#events li.+$(this).attr('id')).removeClass('type_hidden');
        if(!$(#events li.+$(this).attr('id')).hasClass('start_hidden')) {
            $(#events li.+$(this).attr('id')).slideDown();
        }
    } else {
        $(#events li.+$(this).attr('id')).addClass('type_hidden');
        $(#events li.+$(this).attr('id')).slideUp();
    }
    return false;
});

$(#options input.start_check).change(function() {
    if($(this).is(':checked')) {
        $(#events li.+$(this).attr('id')).removeClass('start_hidden');
        if(!$(#events li.+$(this).attr('id')).hasClass('type_hidden')) {
            $(#events li.+$(this).attr('id')).slideDown();    
        }
    } else {
        $(#events li.+$(this).attr('id')).addClass('start_hidden');
        $(#events li.+$(this).attr('id')).slideUp();
    }
    return false;
});

Mon HTML:

<p>Types:</p>
<div><input name=type[] type=checkbox id=type_0 value=0 class=type_check checked=checked /><label for=type_0>Type 0</label></div>
<div><input name=type[] type=checkbox id=type_1 value=1 class=type_check checked=checked /><label for=type_1>Type 1</label></div>
<div><input name=type[] type=checkbox id=type_2 value=2 class=type_check checked=checked /><label for=type_2>Type 2</label></div>
<div><input name=type[] type=checkbox id=type_3 value=3 class=type_check checked=checked /><label for=type_3>Type 3</label></div>
<div><input name=type[] type=checkbox id=type_4 value=4 class=type_check checked=checked /><label for=type_4>Type 4</label></div>

<p>Starts:</p>
<div><input name=start[] type=checkbox id=start_072009 value=072009 class=start_check checked=checked /><label for=type_072009>July 2009</label></div>
<div><input name=start[] type=checkbox id=start_082009 value=082009 class=start_check checked=checked /><label for=type_082009>August 2009</label></div>
<div><input name=start[] type=checkbox id=start_092009 value=092009 class=start_check checked=checked /><label for=type_092009>September 2009</label></div>
<div><input name=start[] type=checkbox id=start_102009 value=102009 class=start_check checked=checked /><label for=type_102009>October 2009</label></div>

<p>Events</p>
<ul id=events>
    <li id=1768 class=type_0 start_072009>Event 1</li>
    <li id=2190 class=type_1 start_072009>Event 2</li>
    <li id=2191 class=type_2 start_072009>Event 3</li>
    <li id=1864 class=type_2 start_082009>Event 4</li>
    <li id=1679 class=type_3 start_082009>Event 5</li>
    <li id=2042 class=type_0 start_092009>Event 6</li>
    <li id=1717 class=type_4 start_092009>Event 7</li>
    <li id=1917 class=type_4 start_092009>Event 8</li>
    <li id=1767 class=type_4 start_092009>Event 9</li>
    <li id=1866 class=type_2 start_102009>Event 10</li>
</ul>
Créé 14/07/2009 à 15:27
source utilisateur
Dans d'autres langues...                            


3 réponses

voix
4

L'ID attributs de vos LIs ne sont pas valides - ils ne peuvent pas être des nombres seulement. Javascript va probablement étouffer en essayant de faire des missions sur eux.

Voir la norme: http://www.w3.org/TR/REC-html40/types.html#type-name

ID et NOM jetons doivent commencer par une lettre ([A-Za-z]) et peut être suivi par un certain nombre de lettres, chiffres ([0-9]), des traits d' union ( "-"), underscores ( "_") , deux - points ( ":") et des points ( "").

Créé 14/07/2009 à 17:48
source utilisateur

voix
0

Modifiez cette ligne:

$("#options input.type_check").change(function() {

Pour ça:

$("#options input.type_check").click(function() {

Faire un changement semblable à votre sélecteur de start_check. Ce crochets l' clickévénement au lieu de l' changeévénement sur vos cases à cocher. Cet événement se déclenche si la souris ou le clavier est utilisé pour modifier la case à cocher.

Je l'ai testé sur mon ordinateur en utilisant IE7 et Firefox.

Créé 14/07/2009 à 18:23
source utilisateur

voix
0

OK, voici le correctif. Changement:

if(!$("#events li."+$(this).attr('id')).hasClass('start_hidden')) {
    $("#events li."+$(this).attr('id')).slideDown();
}

à:

$("#events li).not(".type_hidden, .start_hidden").slideDown();

dans les deux endroits.

Créé 14/07/2009 à 21:59
source utilisateur

Cookies help us deliver our services. By using our services, you agree to our use of cookies. Learn more