| Autor | Zpráva | ||
|---|---|---|---|
| moom Profil |
#1 · Zasláno: 29. 2. 2012, 00:34:28
Lidi zlatí, mám prosím dotaz. Už se snažím dvě hodiny vymyslet jQuery pro filtrování zobrazení DIV elementů na stránce. Mám asi 100 DIV elementů které mají třídu: fix, propiska, roller podle svého obsahu. No a já jsem si nad ně přidal seznam, s tlačítky Zobrazit jen: Fixky, Propisky, Rollery. Což vyfiltruje jenom DIV elementy s danou třídou. Vše funguje jenom při prvním vyfiltrování. Všechny produkty mají CSS třídu display: none; Takže když načtu stránku není nic vidět. Když kliknu na odkaz "fixky" tak se mně zobrazí jenom fixky, ale když kliknu na "propisky" tak se mně zobrazí i rollery, ale už se neschovají Fixky. No a to bych chtěl ještě přidat tlačítko zobrazit vše.
Odkazy mám tyto: <ul>
<li>
<a href="#" class="fixky">Fixy</a>
</li>
<li>
<a href="#" class="propisky">Propisky</a>
</li>
<li>
<a href="#" class="vse">Vše</a>
</li>
</ul>A v jQuery toto: $(document).ready(function() {
$('.fixky').click(function () {
$('.fix').animate({ opacity : 'toggle' }, 'slow');
});
$('.propisky').click(function () {
$('.propiska').animate({ opacity : 'toggle' }, 'slow');
});
});Ještě mě napadlo toto řešení, které řeší schování ostatních produktů, ale zase mně nefunguje pro zobrazení všeho: $('.fixky').click(function () {
$('.fix').show();
$('.propiska').hide();
$('.produkt').hide();
});
$('.propisky').click(function () {
$('.propiska').show();
$('.fix').hide();
$('.produkt').hide();
});
$('.vse').click(function () {
$('.produkt').show();
}); |
||
| weroro Profil |
A musí to byť v jQuery? Ak nie, tak tu som si našiel chvíľku:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8">
<title>
</title>
<style>
.fix{height:30px;background-color:#00ff00;}
.propisky{height:30px;background-color:#0000ff;}
.roller{height:30px;background-color:#ff0000;}
.fix,.propisky,.roller{display:none;border-style:solid;border-width:1px;}
ul li{display:inline;}
</style>
<script>
var temp = null;
var sw = false;
function swDIV(cls)
{
if (cls == 'all')
{
var ha = document.getElementById(cls).getElementsByTagName('div');
temp = null;
//sw = (sw) ? false : true;
sw = !sw;
for (i = 0; i < ha.length; i++) ha[i].style.display = (sw) ? "block" : "none";
return;
}
sw = false;
var el = document.getElementsByClassName(cls)[0].parentNode.getElementsByTagName('div');
for (i = 0; i < el.length; i++) el[i].style.display = "none";
el = [];
el = document.getElementsByClassName(cls);
for (i = 0; i < el.length; i++) el[i].style.display = "block";
el = [];
el = document.getElementsByClassName(temp);
temp = (temp == cls) ? null : cls;
for (i = 0; i < el.length; i++) el[i].style.display = "none";
}
</script>
</head>
<body>
<ul>
<li>
<a href="#" onclick='swDIV("fix")'>Fixy</a>
</li>
<li>
<a href="#" onclick='swDIV("propisky")'>Propisky</a>
</li>
<li>
<a href="#" onclick='swDIV("roller")'>Roller</a>
</li>
<li>
<a href="#" onclick='swDIV("all")'>Vše</a>
</li>
</ul>
<div id='all'>
<div class='fix'></div>
<div class='propisky'></div>
<div class='roller'></div>
<div class='fix'></div>
<div class='propisky'></div>
<div class='roller'></div>
<div class='fix'></div>
<div class='propisky'></div>
<div class='roller'></div>
<div class='fix'></div>
</div>
</body>
</html> |
||
| Chamurappi Profil |
Reaguji na werora:
Metoda getElementsByClassName nefunguje ve všech prohlížečích.
Proč přiřazuješ do el prázdné pole?
Nikde nedeklaruješ proměnnou i.
Reaguji na mooma: Měň při změně výběru třídu na společném rodičovi a zbytek vyřeš v CSS. |
||
| moom Profil |
#4 · Zasláno: 29. 2. 2012, 09:36:48
Paráda, super, děkuji. Funguje to. Ale vůbec už nerozumím jak :)
Já umím jenom CSS, HTML a teď jsem se začal učit základy jQuery ale samotný JavaScript nezvládám. Zatím se pohybuji na úrovni výběru různých elementů, schovávání a animaci, vytvoření proměnné, ale uvedenému řešení moc nerozumím, že vůbec netuším co v uvedeném funkčním řešení co co znamená. No nic, jdu ještě najít co znamená :) i = 0, ==, ++, sw = !sw, i++ |
||
| _es Profil |
moom:
> teď jsem se začal učit základy jQuery > ale samotný JavaScript nezvládám To ale treba postupovať naopak. JQuery je len jedna funkcia/objekt a bez znalosti základov JS ti bude skoro na nič. > No nic, jdu ještě najít co znamená :) > i = 0, ==, ++, sw = !sw, i++ Viď základy JS, napríklad tu. |
||
| moom Profil |
#6 · Zasláno: 29. 2. 2012, 09:55:25 · Upravil/a: Moderátor (editace znemožněna) 29. 2. 2012, 13:25:37
Chamurappi: ha... kurňa, dobré popokopnutí
Pokud rozumím správně, tak bych mohl přidávat třídu: $('.propiska').click(function () {
$('.sortiment').addClass('propisky');
});a v css nastylovat, že když má DIV 'sortiment' přidanou třídu 'propisky' tak se nezobrazují třeba 'rollery' Hmm... To mě nenapadlo, děkuji :) Ještě jsem nakonec udělal toto, kde prvně schovám co nepotřebuji, a na konec zobrazím co potebuji. No a abych jQuery nemuselo furt procházet DOM, tak jsem přidal proměnné. Jenom netuším, jestli musí být nějak oddělené, ale světě div se, funguje to taky: var fix = $('.fix')
var produkt = $('.produkt')
var propiska = $('.propiska')
$('.fixky').click(function () {
produkt.hide();
propiska.hide();
fix.fadeIn(400);
});
$('.propisky').click(function () {
produkt.hide();
fix.hide();
propiska.fadeIn(400);
});
$('.vse').click(function () {
produkt.fadeIn(400);
});_es: Máte pravdu... jsem knedla, ale jsem i grafik a tak JS je pro mě moc složité a přestože jQuery je JS, tak mně pro občasné využití různých efektů a vychytávek připadne jQuery užitečné. Něco málo jsem už pochytil, viz předcházející příspěvek :) na který jsem trošku pyšný :) No vlastně je možná každé řešení špatné, protože je to asi 100 produktů. A možná by bylo lepší využít nějakou funkci ve smyslu načtení stránky, nebo určitého elementu do již hotové stránky. Na tutsplus jsem viděl návod s využitím jQuery: (function() {
var wrap = $('div.wrap');
$('a').on('click', function( e ) {
var href = $(this).attr('href');
wrap.load( href + ' .container' );
e.preventDefault();
});
})(); |
||
| _es Profil |
moom:
„jsem přidal proměnné“ Na oddeľovanie príkazov je dobré používať vždy bodkočiarku. V jednom príkaze var sa môže definovať aj viac premenných: https://developer.mozilla.org/en/JavaScript/Reference/Statements/var
|
||
| moom Profil |
#8 · Zasláno: 29. 2. 2012, 11:06:56
_es:
Mohu se prosím zeptat ještě na jednu otázku. Je tedy pravda, že je lepší dělat proměnné, aby JS nemusel znovu a znovu procházet DOM, tedy aspoň tak jsem to pochopil, že je to výhodné... |
||
| _es Profil |
#9 · Zasláno: 29. 2. 2012, 11:43:54
moom:
V premennej je len odkaz na objekt, teda je dobré ich vhodne využiť. Neustále vyhľadávanie prvkov v DOM je výpočtovo náročné. |
||
| weroro Profil |
„Metoda getElementsByClassName nefunguje ve všech prohlížečích.“
To som nevedel. Ako sa potom pracuje s elementami, ktoré majú priradené class? Chamurappi: „Proč přiřazuješ do el prázdné pole?“ Pretože el napĺňam vopred neznámym počtom prvkov, a keďže ho ďalej prepisujem ďalším neznámym počtom prvkov môže sa stať, že prvý krát bude v el 11 prvkov a budem ho chcieť prepísať 6 prvkami. Ale legth mi stále vráti dĺžku 11 a el bude obsahovať od 7 pozície aj tie staré prvky. Preto el najprv vymazávam. (Alebo to takto v JS nefunguje, pardom v AS to pôsobí veľké problémy, tak to automaticky robím všade) „Nikde nedeklaruješ proměnnou i.“ To som si uvedomil, keď som sa ráno zobudil. Vždy deklarujem, akurát teraz som na to pozabudol. |
||
| moom Profil |
#11 · Zasláno: 29. 2. 2012, 12:35:27
Paráda, super, každý se něco přiučí :)
|
||
| Chamurappi Profil |
#12 · Zasláno: 29. 2. 2012, 13:44:15
Reaguji na werora:
„Ako sa potom pracuje s elementami, ktoré majú priradené class?“ To prakticky nikdy není potřeba. Pokud je, tak se musí cyklem projít všechny elementy a individuálně ověřit jejich třída. „Pretože el napĺňam vopred neznámym počtom prvkov“ To není tak úplně pravda. Metody DOMu většinou nevrací skutečné pole, ale HTML kolekci — která je takzvaně živá. Reálně to znamená, že do el se nedostanou nalezené elementy, ale universální trpaslík, který sice ví, co tě zajímá, ale začne makat až v okamžiku, kdy se zeptáš na něco konkrétního. Zeptáš-li se na length, prohledá DOM, spočítá nalezené a to ti řekne. Zeptáš-li se na pátou položku kolekce, začne prohledávat DOM, odpočítá si raz, dva, tři, čtyři, pět a pátý výskyt ti předá…
|
||
|
Časová prodleva: 12 let
|
|||
0