jQuery meerdere checkbox filters

stemmen
1

Ik heb een lijst van evenementen, deze gebeurtenissen zijn elk van een specifiek type, en starten in een bepaalde maand. Ik heb een checkbox groep voor types en één voor maanden. Wat ik probeer te doen is het gebruik van de selectievakjes om de lijst te filteren. Ik heb het werkend met één groep, maar kan niet schijnen om het werkend te krijgen met twee.

In principe Ik ben op zoek naar een klasse te stellen wanneer ik het item in de lijst te verbergen, dus ik weet welke groep verborg het, maar het lijkt in de war raken. De klasse namen zijn correct, maar sommige soms items niet meer de weg getoond.

Als iedereen kan zien wat ik verkeerd doe, of denken aan een betere oplossing dat zou geweldig zijn! Bedankt!

Darren.

Mijn 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;
});

Mijn 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>
De vraag is gesteld op 14/07/2009 om 15:27
bron van user
In andere talen...                            


3 antwoorden

stemmen
4

De ID-attributen op uw LIs ongeldig zijn - ze kunnen niet alleen nummers. Javascript zal waarschijnlijk stikken wanneer het proberen om opdrachten te maken op hen.

Zie de norm: http://www.w3.org/TR/REC-html40/types.html#type-name

ID en NAME tekens moeten beginnen met een letter ([A-Za-z]) en kan gevolgd worden door een willekeurig aantal letters, cijfers ([0-9]), streepjes ( "-"), streepjes ( "_") , dubbele punten ( ":") en punten ( "").

antwoordde op 14/07/2009 om 17:48
bron van user

stemmen
0

Wijzig deze regel:

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

Om dit:

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

Maak een soortgelijke verandering in uw start_check selector. Deze haken de clickgebeurtenis in plaats van het changeevenement op uw vakjes. Dit evenement zal bij brand of de muis of het toetsenbord wordt gebruikt om de checkbox te veranderen.

Ik testte het op mijn computer met behulp van IE7 en Firefox.

antwoordde op 14/07/2009 om 18:23
bron van user

stemmen
0

OK, hier is de oplossing. Verandering:

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

naar:

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

in beide plaatsen.

antwoordde op 14/07/2009 om 21:59
bron van user

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