Я искал демо / образец простого списка, где я могу сортировать элементы по классам, с несколькими входными данными / тегами и (!), Тогда, конечно, , если все не отмечены, тогда все результаты должныпоказать снова .
После того, как вы собрали множество кусочков и подсказок со всего, это наконец-то работает!
Мой вопрос - как я могу оптимизировать это решение?(Можно ли оптимизировать его?)
<!DOCTYPE html>
<html>
<head>
<title>Bunko.se webbdesign exempel</title>
<link rel="stylesheet" type="text/css" href="mystyle.css" />
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
</head>
<body>
<div class="filters">
<input type="checkbox" value="teacher" />teacher<br />
<input type="checkbox" value="math" />math<br />
<input type="checkbox" value="principal" />principal<br />
etc..
</div>
<script>
//An array that will contain all filters
var filter_array = new Array();
// activates if checkbox is clicked
jQuery(".filters input").click(function() {
// Empties the array
// - so that it removes values that were previously selected but are now unchecked.
var filter_array = new Array();
jQuery('.filters input:checked').each( function() {
// Add checked box value to array
filter_array.push(jQuery(this).val());
});
// if there are no filters then show all results!
if (filter_array.length === 0) {
jQuery(".search_results div").show();
} else{
jQuery(".search_results div").hide().filter('.' + filter_array.join('.')).show();
}
});
</script>
<div class="search_results">
<div class="math textbook free">
I contain classes: math, textbook and free
</div>
<div class="science chemistry teacher">
I contain classes: science, chemistry, teacher
</div>
<div class="principal teacher math">
I contain classes: principal teacher math
</div>
</div>
</body>
</html>
Ооо, и как можно сделать то же самое, но со списком тегов, использующих ul li вместо флажков?
Но это полезноа кто-то еще!:)