Autor Zpráva
moom
Profil
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
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
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
_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
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
Paráda, super, každý se něco přiučí :)
Chamurappi
Profil
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á…

Vaše odpověď

Mohlo by se hodit

Neumíte-li správně určit příčinu chyby, vkládejte odkazy na živé ukázky.
Užíváte-li nějakou cizí knihovnu, ukažte odpovídajícím, kde jste ji vzali.

Užitečné odkazy:

Prosím používejte diakritiku a interpunkci.

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