Pomoc - Szukaj - Użytkownicy - Kalendarz
Pełna wersja: $('#element:not(.something') - dodanie kilku wartosci
Forum PHP.pl > Forum > Po stronie przeglądarki > JavaScript
SpiJay
Witam,
szybkie pytanko,

mam listę elementów div jeden pod drugim, chcę dodać filtrowanie wyników za pomocą np 3 wartości:

[JAVASCRIPT] pobierz, plaintext
  1. $('#klik').click(function(e){
  2. $('#element:not(.something1, .something2, .something3)').hide();
  3. });
[JAVASCRIPT] pobierz, plaintext


Aczkolwiek to nie działa jak ja bym chciał...

Otóż działanie miałoby być następujące:

1. Wybieram po kliknięciu something1 i wyświetla mi wyniki wyfiltrowane - super.
2. Wybór kolejnego - something2 - ma wyświetlać wyniki powiązane z something1, filtrować już wyfiltrowane czyli coś na zasadzie kodu PHP:

  1. if($element == $something1 AND $element == $something2)




Macie jakieś rady ?
Pozdrawiam
kamil4u
Możesz opisać problem inaczej? Nie za bardzo Cię rozumiem.
SpiJay
Mam takie kody:
[JAVASCRIPT] pobierz, plaintext
  1. $(document).ready(function(){
  2. $('#filtr-kolor div a').click(function(e){
  3. e.preventDefault();
  4. var filter = $(this).attr('id');
  5. $('#mini-slide div.mini-wraper').show();
  6. $('#mini-slide div.mini-wraper:not(.' + filter + ')').hide();
  7. });
  8. });
[JAVASCRIPT] pobierz, plaintext


FILTRY:

  1. <div id="filtr-body">
  2. <div id="filtr-kolor">
  3. <span class="filtr-name">Kolor</span>
  4. <div class="filtr"><a id="czerwone"><img src="images/wina-i.png" /> Czerwone</a></div>
  5. <div class="filtr"><a id="biale"><img src="images/wina-i.png" /> Białe</a></div>
  6. <div class="filtr"><a id="rozowe"><img src="images/wina-i.png" /> Różowe</a></div>
  7. </div>
  8. <div id="filtr-cena">
  9. <span class="filtr-name">Cena</span>
  10. <div class="filtr"><a id="do50"><img src="images/wina-i.png" /> do 50zł</a></div>
  11. <div class="filtr"><a id="50do100"><img src="images/wina-i.png" /> 50zł - 100zł</a></div>
  12. <div class="filtr"><a id="100plus"><img src="images/wina-i.png" /> ponad 100zł</a></div>
  13. </div>
  14. <div id="filtr-smak">
  15. <span class="filtr-name">Smak</span>
  16. <div class="filtr"><a id="slodkie"><img src="images/wina-i.png" /> Słodkie</a></div>
  17. <div class="filtr"><a id="wytrawne"><img src="images/wina-i.png" /> Wytrawne</a></div>
  18. <div class="filtr"><a id="musujace"><img src="images/wina-i.png" /> Musujące</a></div>
  19. </div>
  20. <div id="filtr-kontynent">
  21. <span class="filtr-name">Region</span>
  22. <div class="filtr ameryka"><a id="Ameryka"><img src="images/wina-i.png" /> Ameryka</a></div>
  23. <div class="filtr europa"><a id="Europa"><img src="images/wina-i.png" /> Europa</a></div>
  24. </div>
  25. <div id="filtr-panstwa">
  26. <span class="filtr-name">Kraj</span>
  27. <div class="filtr ameryka"><a id="Arggentyna"><img src="images/wina-i.png" /> Argentyna</a></div>
  28. <div class="filtr ameryka"><a id="Chile"><img src="images/wina-i.png" /> Chile</a></div>
  29. <div class="filtr ameryka"><a id="Brazylia"><img src="images/wina-i.png" /> Brazylia</a></div>
  30.  
  31. <div class="filtr europa"><a id="Francja"><img src="images/wina-i.png" /> Francja</a></div>
  32. <div class="filtr europa"><a id="Wlochy"><img src="images/wina-i.png" /> Włochy</a></div>
  33. <div class="filtr europa"><a id="Hiszpania"><img src="images/wina-i.png" /> Hiszpania</a></div>
  34. </div>
  35. <div id="filtr-result">Znaleziono wyników: <b></b></div>
  36. </div>
  37. </div>


PHP:
  1. $qwerty = "SELECT * FROM `xxx` ORDER by id";
  2. $sql = mysql_query($qwerty);
  3. while($id = mysql_fetch_assoc($sql)) {
  4. if($id['cena_handlowa'] <= '50') { $cena = 'do50'; }
  5. if($id['cena_handlowa'] > '50' && $id['cena_handlowa'] <= '100') { $cena = '50do100'; }
  6. if($id['cena_handlowa'] > '100') { $cena = '100plus'; }
  7. echo '
  8. <div class="mini-wraper '.$id['kolor'].' '.$cena.' '.$id['smak'].' '.$id['region'].' '.$id['kraj'].'">
  9. <form method="post" action="" class="jcart">
  10. <fieldset>
  11. <input type="hidden" name="jcartToken" value="'.$_SESSION['jcartToken'].'" />
  12. <input type="hidden" name="my-item-id" value="'.$id['id'].'" />
  13. <input type="hidden" name="my-item-name" value="'.$id['nazwa'].'" />
  14. <input type="hidden" name="my-item-price" value="'.$id['cena_handlowa'].'" />
  15. <input type="hidden" name="my-item-url" value="" />
  16.  
  17. <input type="submit" name="my-add-button" value="do koszyka +" class="item-button" style="position: absolute; top: 10px; right: 30px;" />
  18. <input type="text" name="my-item-qty" value="1" size="3" class="item-sztuk" style="position: absolute; top: 11px; right: 137px;" />
  19. <div class="mini-desc">
  20. <div class="mini-name">'.$id['nazwa'].'</div>
  21. <div><span class="color cena" cena="'.$id['cena_handlowa'].'">Cena:</span><br/>'.$id['cena_handlowa'].'zł</div>
  22. <div><span class="color kraj" kraj="'.$id['kraj'].'">Kraj:</span><br/>'.$id['kraj'].'</div>
  23. <div><span class="color smak" smak="'.$id['smak'].'">Smak:</span><br/>'.$id['smak'].'</div>
  24. <div><span class="color kolor" kolor="'.$id['kolor'].'">Kolor:</span><br/>'.$id['kolor'].'</div>
  25. </div>
  26. <img src="'.$id['zdj_mini'].'" slide="'.$id['zdj_duze'].'" name="'.$id['nazwa'].'" class="quick" opis="'.$id['opis'].'" />
  27. </fieldset>
  28. </form>
  29. </div>';
  30. }


Działa to tak, że wyświetla mi wyniki z bazy w formie jak jest wyżej, a filtry mają za zadanie pomóc internaucie w sortowaniu wyników za pomocą JS.
Zależy mi na tym, abym mógł wybrać np. Kolor, Smak i cene wina, a kod jQuery wyfiltruje mi wyniki po zaznaczonych wartościach.
PrinceOfPersia
http://lmgtfy.com/?q=filter+results+jquery
poza tym RTFM: http://api.jquery.com/not-selector/ :
Cytat
Additional Notes

The .not() method will end up providing you with more readable selections than pushing complex selectors or variables into a :not() selector filter. In most cases, it is a better choice.
SpiJay
@UP
chciałem kliknąć "Cytat", a kliknąłem "pomógł"...
nie mam problemów z szukaniem http://www.spijay.com/demo/google.jpg (wszystkie linki odwiedzone), tylko z interpretowaniem tekstu i z korzystaniem z przykładowych kodów.
Mimo wszystko dzięki za zainteresowanie tematem.

Znalazłem skrypt o który mi chodziło pod hasłem "jQuery multiple filter" -> http://demos.webegg.co.uk/jquery-multiple-filter/
PrinceOfPersia
Cytat(SpiJay @ 9.04.2013, 06:47:22 ) *
@UP
chciałem kliknąć "Cytat", a kliknąłem "pomógł"...

nie ma sprawy, nie pogniewam się wink.gif

To jest wersja lo-fi głównej zawartości. Aby zobaczyć pełną wersję z większą zawartością, obrazkami i formatowaniem proszę kliknij tutaj.
Invision Power Board © 2001-2025 Invision Power Services, Inc.