Forum PHP.pl > jak zrobic w jquery prosty filtr?

Pomoc - Szukaj - Użytkownicy - Kalendarz

Pełna wersja: jak zrobic w jquery prosty filtr?

Forum PHP.pl > Forum > Po stronie przeglądarki > JavaScript

marcus755

23.01.2013, 15:39:21

jak zrobic w jquery prosty filtr?
np.

<a href="#" id="prod1">link 1</a>
<a href="#" id="prod2">link 2</a>
<a href="#" id="prod3">link 3</a>
<a href="#" id="prod4">link 4</a>

<div class="box1 prod1 prod2">...</div>
<div class="box2 prod1 prod2">...</div>
<div class="box3 prod1 prod3">...</div>
<div class="box4 prod1 prod3">...</div>
<div class="box5 prod1 prod2">...</div>
<div class="box6 prod1 prod4">...</div>
<div class="box7 prod1 prod4">...</div>
<div class="box8 prod1 prod4">...</div>

Jak klikkniemy link z id prod1 pokaże nam wszystkie divy z klasą prod1,
jak link z id prod2 pokaże nam tylko divy z klasą prod2, itd.

Jak to zrobić?
ew. zaproponujcie jakąś prostszą metodę filtrowania divów, w zależności jaki link się kliknie...

Grzesie.k

23.01.2013, 16:05:19

[PHP] pobierz, plaintext 
<!DOCTYPE html>
<html>
	<head>
		<title>Test</title>
		<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js"></script>
		<style>
div.box {
	width:80px;
	height:60px;
	border:1px solid black;
	display:inline-block;
}
nav>a {
	display:block;
}
		</style>
		<script>
$(function(){
	$('nav>a').click(function(e){
		e.preventDefault();
		var id=$(this).attr('id');
		$('div.box:not(.'+id+')').hide('slow');
		$('div.'+id).show('slow');
	});
});
		</script>
	</head>
	<body>
		<nav>
			<a href="#" id="prod1">link 1</a>
			<a href="#" id="prod2">link 2</a>
			<a href="#" id="prod3">link 3</a>
			<a href="#" id="prod4">link 4</a>
		</nav>
		<div class="box prod1 prod2">box prod1 prod2</div>
		<div class="box prod1 prod2">box prod1 prod2</div>
		<div class="box prod1 prod3">box prod1 prod3</div>
		<div class="box prod1 prod3">box prod1 prod3</div>
		<div class="box prod1 prod2">box prod1 prod2</div>
		<div class="box prod1 prod4">box prod1 prod4</div>
		<div class="box prod1 prod4">box prod1 prod4</div>
		<div class="box prod1 prod4">box prod1 prod4</div>
	</body>
</html>
[PHP] pobierz, plaintext

marcus755

23.01.2013, 17:26:55

Super, dzięki Wielkie:-)

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.