Форум

serhioses · #1 (**permalink**) 27.04.2015, 10:06

Есть хедер с селектами и есть блок со списком, который выводит все игры. Нужно написать фильтр на js (можно использовать jquery) который будет выводить игры в соответствии с выбранным пунктом селекта. Например: выбрали RPG - появились все RPG, добавили еще скажем платформу Android - вывелись все RPG но уже только на Android, добавили страну скажем Russia, теперь выводятся только RPG на Android из Russia. Ну и если мы возвращаем какую-то категорию в дефолтное состояние, скажем Country(all) то выводится уже только RPG + Android но со всех стран. Жанр, платформа и страна хранятся в data-game в элементах li. Подскажите как такое возможно сделать?

<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>

laimas · #2 (**permalink**) 27.04.2015, 10:22

А как эти записи хранятся в базе? Неужто страна, это не идентификатор числовой, а игры тоже не под уникальными идентификаторами?
Это к тому, что страна А, это id 1, страна Б, это id 2, и т.д. Стратегии это id 1, стрелялки, это id 2. И тогда сортировать нужно по маске: 21, 11 и т.д.

serhioses · #3 (**permalink**) 27.04.2015, 10:36

В базе ничего не хранится, просто задача состоит в том чтоб сделать это просто на js с использованием data у элементов, без баз данных и ajax и php

ksa · #4 (**permalink**) 27.04.2015, 11:32

Сообщение от serhioses

с использованием data у элементов

Так не удобно... Более удобно с class

<!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(){
		var slct='';
		$('select').each(function(){
			var val=this.value
			if (val!='') {
				val='.'+this.id.valueOf()[0]+'-'+val;
				slct+=val;
			};
		});
		$('section li').hide().filter(slct).show();
	});
});
</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 class="g-rpg p-pc c-usa">
			<div class="img"></div>
			<p>World of Tanks</p>
		</li>
		<li class="g-shooter p-pc c-usa">
			<div class="img"></div>
			<p>Counter Strike</p>
		</li>
		<li class="n g-strategy p-pc c-russia">
			<div class="img"></div>
			<p>Heroes of Might and Magic</p>
		</li>
		<li class="n g-strategy p-pc c-england">
			<div class="img"></div>
			<p>Civilization</p>
		</li>
		<li class="n g-shooter p-pc c-usa">
			<div class="img"></div>
			<p>Crysis</p>
		</li>
		<li class="n g-arcade p-android c-ukraine">
			<div class="img"></div>
			<p>Boxes</p>
		</li>
		<li class="n g-action p-ps3 c-usa">
			<div class="img"></div>
			<p>The last of us</p>
		</li>
	</ul>
</section>
</body>
</html>

ksa · #5 (**permalink**) 27.04.2015, 11:47

Сообщение от 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>

serhioses · #6 (**permalink**) 28.04.2015, 12:48

Да идеально, спасибо

Не посоветуете сайты, книги, задачники по js (кроме это сайта), я заметил что у меня проблема с составлением алгоритмов при решении задач, как это можно подтянуть не подскажите? Тут очень простое и лаконичное решение, то что мне и нужно

ksa · #7 (**permalink**) 29.04.2015, 09:07

Сообщение от serhioses

я заметил что у меня проблема с составлением алгоритмов при решении задач, как это можно подтянуть не подскажите?

Дело в том, что построению алгоритмов я учился в ВУЗе... Там было несколько предметов и несколько направлений для этого. Т.е. это не один год и не один преподаватель...
Плюс не паханое поле по решению всяких задач типа семестровые, курсовые, дипломные...

Т.ч. посоветовать какую-то книгу по построению алгоритмов я, пожалуй, не смогу...

Тебе остается только самому уповать на свою же практику... Смотреть какие решения предлагают другие на этом форуме, разбираться в них...
А самое главное начать решать самому. Без этого вообще ничего не получится.

serhioses · #8 (**permalink**) 29.04.2015, 10:07

Дельный совет, спасибо, форум конечно очень хороший

j0hnik · #9 (**permalink**) 26.01.2017, 16:57

Help!! помогите этот фильтр применить к вот такой конструкции:
Вместо селекта будут стилизованные блоки div (в активном положении будут с ярким бордером)

вот сам фильтр:

<div id="filter">
         <!--Стекло-->
         <div class="active"><a class="all" href="#">Все</a></div>
        <div><a class="st" href="#">Остекленная</a></div>
        <div><a class="gl" href="#">Глухая</a></div>
        <!--Цвет-->
        <div class="active"><a class="all" href="#">Все</a></div>
        <div><a class="milan" href="#">Миланский орех</a></div>
        <div><a class="italian" href="#">Итальянский орех</a></div>
        <div><a  class="venge" href="#">Венге</a></div>
      </div>

и айтемы тоже не в li a в дивах

вот сами айтемы:

<div class="items">
  <!--item1-->
  <div class="item" data-blabla="venge st">
    <div>...</div>
  </div>
  <!--item2-->
  <div class="item" data-blabla="milan st">
    <div>...</div>
  </div>
  <!--item3-->
<div class="item" data-blabla="italian gl">
    <div>...</div>
  </div>

именно дивы в фильтре хочу использовать для того чтобы их красиво стилизовать под цвет айтемов вот пример:

Форум

Справочник

Discord чат

Курсы javascript