Mam takie kody:
$(document).ready(function(){
$('#filtr-kolor div a').click(function(e){
e.preventDefault();
var filter = $(this).attr('id');
$('#mini-slide div.mini-wraper').show();
$('#mini-slide div.mini-wraper:not(.' + filter + ')').hide();
});
});
FILTRY:
<div class="filtr"><a id="czerwone"><img src="images/wina-i.png" /> Czerwone
</a></div> <div class="filtr"><a id="biale"><img src="images/wina-i.png" /> Białe
</a></div> <div class="filtr"><a id="rozowe"><img src="images/wina-i.png" /> Różowe
</a></div> <div class="filtr"><a id="do50"><img src="images/wina-i.png" /> do 50zł
</a></div> <div class="filtr"><a id="50do100"><img src="images/wina-i.png" /> 50zł - 100zł
</a></div> <div class="filtr"><a id="100plus"><img src="images/wina-i.png" /> ponad 100zł
</a></div> <div class="filtr"><a id="slodkie"><img src="images/wina-i.png" /> Słodkie
</a></div> <div class="filtr"><a id="wytrawne"><img src="images/wina-i.png" /> Wytrawne
</a></div> <div class="filtr"><a id="musujace"><img src="images/wina-i.png" /> Musujące
</a></div> <div id="filtr-kontynent"> <div class="filtr ameryka"><a id="Ameryka"><img src="images/wina-i.png" /> Ameryka
</a></div> <div class="filtr europa"><a id="Europa"><img src="images/wina-i.png" /> Europa
</a></div> <div class="filtr ameryka"><a id="Arggentyna"><img src="images/wina-i.png" /> Argentyna
</a></div> <div class="filtr ameryka"><a id="Chile"><img src="images/wina-i.png" /> Chile
</a></div> <div class="filtr ameryka"><a id="Brazylia"><img src="images/wina-i.png" /> Brazylia
</a></div>
<div class="filtr europa"><a id="Francja"><img src="images/wina-i.png" /> Francja
</a></div> <div class="filtr europa"><a id="Wlochy"><img src="images/wina-i.png" /> Włochy
</a></div> <div class="filtr europa"><a id="Hiszpania"><img src="images/wina-i.png" /> Hiszpania
</a></div> <div id="filtr-result">Znaleziono wyników:
<b></b></div>
PHP:
$qwerty = "SELECT * FROM `xxx` ORDER by id";
if($id['cena_handlowa'] <= '50') { $cena = 'do50'; }
if($id['cena_handlowa'] > '50' && $id['cena_handlowa'] <= '100') { $cena = '50do100'; }
if($id['cena_handlowa'] > '100') { $cena = '100plus'; }
<div class="mini-wraper '.$id['kolor'].' '.$cena.' '.$id['smak'].' '.$id['region'].' '.$id['kraj'].'">
<form method="post" action="" class="jcart">
<fieldset>
<input type="hidden" name="jcartToken" value="'.$_SESSION['jcartToken'].'" />
<input type="hidden" name="my-item-id" value="'.$id['id'].'" />
<input type="hidden" name="my-item-name" value="'.$id['nazwa'].'" />
<input type="hidden" name="my-item-price" value="'.$id['cena_handlowa'].'" />
<input type="hidden" name="my-item-url" value="" />
<input type="submit" name="my-add-button" value="do koszyka +" class="item-button" style="position: absolute; top: 10px; right: 30px;" />
<input type="text" name="my-item-qty" value="1" size="3" class="item-sztuk" style="position: absolute; top: 11px; right: 137px;" />
<div class="mini-desc">
<div class="mini-name">'.$id['nazwa'].'</div>
<div><span class="color cena" cena="'.$id['cena_handlowa'].'">Cena:</span><br/>'.$id['cena_handlowa'].'zł</div>
<div><span class="color kraj" kraj="'.$id['kraj'].'">Kraj:</span><br/>'.$id['kraj'].'</div>
<div><span class="color smak" smak="'.$id['smak'].'">Smak:</span><br/>'.$id['smak'].'</div>
<div><span class="color kolor" kolor="'.$id['kolor'].'">Kolor:</span><br/>'.$id['kolor'].'</div>
</div>
<img src="'.$id['zdj_mini'].'" slide="'.$id['zdj_duze'].'" name="'.$id['nazwa'].'" class="quick" opis="'.$id['opis'].'" />
</fieldset>
</form>
</div>';
}
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.