Ik ben nieuw in jquery. Een basaal script via W3school heb ik uitgetest. Jquery is met dat script operationeel. Nu heb ik via http://jsfiddle.net/nanoquantumtech/Ddnuh/ een script voor checkbox filter overgenomen. Deze doet het echter niet op mijn website. Op hun website toont hij als werkende. Ziet iemand wat er verkeerd gaat? Mijn totale -niet werkende- code is als volgt:
HTML:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="nl" xmlns:fb="http://ogp.me/ns/fb#">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<link rel="shortcut icon" href="/afbeeldingen/favicon.ico" type="image/x-icon" />
<title>Test</title>
<meta name="description" content="Test." />
<meta name="keywords" content="Test" />
<meta name="robots" content="index, follow" />
<meta name="language" content="nl" />
<meta property="og:image" content="http://www.test.nl/logo.png"/>
<style>
</style>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script>
$(document).ready(function () {
$('.results > li').hide();
$('div.tags').find('input:checkbox').live('click', function () {
$('.results > li').hide();
$('div.tags').find('input:checked').each(function () {
$('.results > li.' + $(this).attr('rel')).show();
});
});
});
</script>
</head>
<body>
<div class="tags">
<label>
<input type="checkbox" rel="arts" />
Arts
</label>
<label>
<input type="checkbox" rel="computers" />
Computers
</label>
<label>
<input type="checkbox" rel="health" />
Health
</label>
<label>
<input type="checkbox" rel="video-games" />
Video Games
</label>
</div>
<ul class="results">
<li class="arts computers">Result 1</li>
<li class="video-games">Result 2</li>
<li class="computers health video-games">Result 3</li>
<li class="arts video-games">Result 4</li>
</ul>
</body>
</html>
Laatst bewerkt door een moderator:
