Autor Zpráva
had
Profil *
Ahoj,
snažím se udělat takovou jednoduchoučkou aplikaci, která bude načítat a filtrovat poznámky ze čteček Kindle. Nahraju na server z Kindlu txt soubor, načtu z něho data do HTML, vytvořím menu, ve kterém budou zaškrtávací políčka, kterými se budou filtrovat položky. Jednotlivé položky mají následující vlastnosti:

1) typ - každá položka je buď POZNÁMKA nebo OZNAČENÍ. Více možností typu než tyto dvě nebude.
2) název knihy - každá položka má jeden název knihy. V menu může existovat vícero checkboxů podle počtu druhů knih. Mám třeba 60 poznámek a označení z 10 knih => zde bude 10 filtrovacích checkboxů.
3) autor - každá položka má jednoho svého autora. Stejný případ jako u knih - zobrazím v menu tolik checkboxů, kolik bude druhů autorů, každý bude mít checkbox.

Co chci je jednoduché. Na začátku jsou všechny checkboxy v menu zaškrtnuté a zobrazené všechny položky. Odškrtnu / zaškrtnu libovolný checkbox a skryjí / zobrazí se mi položky, které mají daný atribut. Pokud by se jednalo o jeden checkbox, bylo by to v pohodě, ale vícenásobné skrývání / zobrazování proměnlivého počtu filtrovacích možností už je docela oříšek...

Napadá někoho, prosím, způsob, jak na to?
Jan Tvrdík
Profil
had:
Napadá někoho, prosím, způsob, jak na to?
Pokud neřešíš výkon, tak stačí mít pole s DOMElementů (pro každou poznámku) a při každé změně nějaké checkboxu to pole proiterovat a pro každou poznámku rozhodnout, zda se má zobrazit nebo ne.


Další možné řešení může být přes soubor CSS tříd. Jednotlivé poznámky na sobě budou mít např. CSS třídy kniha_42 autor_16 typ_1 a každý checkbox bude vázán na jednu třídu.
had
Profil *
hm...bohužel tohle řešení jsem nepochopil, jsem asi úplně natvrdlej :-) Co by přesně mělo být v tom poli? Všechny možnosti a T/F k nim?


k CSS třídám: to by znamenalo, že bych musel generovat X * Y možností CSS stylů? Tedy všechny varianty CSS stylů?
Jan Tvrdík
Profil
had:
Co by přesně mělo být v tom poli?
Něco jako document.getElementsByClassName('note').

to by znamenalo, že bych musel generovat X * Y možností CSS stylů? Tedy všechny varianty CSS stylů?
Stejně stylů jako checkboxů.
had
Profil *
1) Pole: aha, pochopil jsem (snad) :) Ale je to docela šílené řešení...

2) CSS: to ale už i teď musí každá položka mít třídu, abych je mohl vůbec ovládat. Potřebuju přece změnu u všech položek stejného typu... ale to stejně nemůže fungovat, musel bych jim přeřazovat pořadí, aby se mi přepisovala vlastnost display: none;, nebo ne?
juriad
Profil
Raději bych to řešil přes třídy.
Každé položce přidáš tři třídy:
...
<div class="hniha_42 autor_16 typ_1">Toto je poznamka autora 16 u knihy 42</div>
...

a na každý checkbox navěsíš něco takového:
$("#kniha_42").change(function() { // checkbox ma id kniha_42
    if(this.checked) {
        $('.kniha_42').removeClass('not_kniha_42'); // polozky maji class kniha_42
    } else {
        $('.kniha_42').addClass('not_kniha_42');
    }
});
a vytvoříš css pravidla:
.not_kniha_42, .not_autor_16, ... {
  display: none;
}



každý checkbox si bude obsluhovat jen svou sadu tříď (kniha_42 a not_kniha_42); samotný mechanismus css se postará o to, že položka bude zobrazena jen tehdy, když nebude mít žádné třídy not_*
had
Profil *
juriad: ale to mi nebude fungovat úplně korektně - CSS bude hodnotu vlastnosti přepisovat, bude se brát v potaz poslední možnost - tedy zobrazit (podle .typ_1)

<div class="kniha_42 not_autor_16 typ_1">obsah poznámky</div>
juriad
Profil
<div class="kniha_42 autor_16 typ_1">obsah poznámky</div>
ale ty třídy nebudou v css definované (slouží jen pro výběr) a tedy nebudou ani mít definici display, tedy k žádnému přepisování pozdějším docházet nebude.
Ty budeš jen manipulovat pouze s třídami not_*. Třídy kniha_*, autor_*, typ_* zůstávají přiřazené v atributu class v HTML.
had
Profil *
ha! Ok, zkusím to tak a kdyby to nešlo, tak se zítra znovu ozvu.

(Zatím) díky za pomoc s řešením a hezký večer!

Vaše odpověď


Prosím používejte diakritiku a interpunkci.

Ochrana proti spamu. Napište prosím číslo dvě-sta čtyřicet-sedm: