|
Сообщение от serhioses
|
|
на js с использованием data у элементов
|
Что-то типа такого...
<!DOCTYPE html>
<html>
<head>
<meta http-equiv='Content-Type' content='text/html; charset=windows-1251' />
<script src='http://code.jquery.com/jquery-latest.js'></script>
<!--
<script src="https://code.angularjs.org/1.3.9/angular.min.js"></script>
<script src="https://code.angularjs.org/1.3.9/angular-route.js"></script>
<link rel='stylesheet type=text/css href=tmp.css' />
<link rel="stylesheet/less" type="text/css" href="style.less">
<script src="http://cdnjs.cloudflare.com/ajax/libs/less.js/2.5.0/less.min.js"></script>
-->
<style type='text/css'>
</style>
<script type='text/javascript'>
$(function(){
$('select').change(function(){
$('section li').show();
$('select').each(function(){
var val=this.value
if (val!='') {
val=this.id.valueOf()[0]+'-'+val;
$('section li:not([data-game*="'+val+'"])').hide();
};
});
});
});
</script>
</head>
<body>
<header>
<ul>
<li>
<select name="" id="genre">
<option value="">Genre(all)</option>
<option value="rpg">RPG</option>
<option value="shooter">Shooter</option>
<option value="strategy">Strategy</option>
<option value="action">Action</option>
<option value="arcade">Arcade</option>
</select>
</li>
<li>
<select name="" id="platform">
<option value="">Platform(all)</option>
<option value="pc">PC</option>
<option value="android">Android</option>
<option value="ps3">PS3</option>
</select>
</li>
<li>
<select name="" id="country">
<option value="">Country(all)</option>
<option value="usa">USA</option>
<option value="russia">Russia</option>
<option value="england">England</option>
<option value="ukraine">Ukraine</option>
</select>
</li>
</ul>
</header>
<section>
<ul>
<li data-game="g-rpg p-pc c-usa">
<div class="img"></div>
<p>World of Tanks</p>
</li>
<li data-game="g-shooter p-pc c-usa">
<div class="img"></div>
<p>Counter Strike</p>
</li>
<li class="n" data-game="g-strategy p-pc c-russia">
<div class="img"></div>
<p>Heroes of Might and Magic</p>
</li>
<li class="n" data-game="g-strategy p-pc c-england">
<div class="img"></div>
<p>Civilization</p>
</li>
<li class="n" data-game="g-shooter p-pc c-usa">
<div class="img"></div>
<p>Crysis</p>
</li>
<li class="n" data-game="g-arcade p-android c-ukraine">
<div class="img"></div>
<p>Boxes</p>
</li>
<li class="n" data-game="g-action p-ps3 c-usa">
<div class="img"></div>
<p>The last of us</p>
</li>
</ul>
</section>
</body>
</html>