Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #1 (permalink)  
Старый 27.04.2015, 10:06
Интересующийся
Отправить личное сообщение для serhioses Посмотреть профиль Найти все сообщения от serhioses
 
Регистрация: 17.02.2015
Сообщений: 12

Написать на js фильтр для вывода данных по категориям
Есть хедер с селектами и есть блок со списком, который выводит все игры. Нужно написать фильтр на 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>
Ответить с цитированием
  #2 (permalink)  
Старый 27.04.2015, 10:22
Профессор
Отправить личное сообщение для laimas Посмотреть профиль Найти все сообщения от laimas
 
Регистрация: 14.01.2015
Сообщений: 12,989

А как эти записи хранятся в базе? Неужто страна, это не идентификатор числовой, а игры тоже не под уникальными идентификаторами?
Это к тому, что страна А, это id 1, страна Б, это id 2, и т.д. Стратегии это id 1, стрелялки, это id 2. И тогда сортировать нужно по маске: 21, 11 и т.д.
Ответить с цитированием
  #3 (permalink)  
Старый 27.04.2015, 10:36
Интересующийся
Отправить личное сообщение для serhioses Посмотреть профиль Найти все сообщения от serhioses
 
Регистрация: 17.02.2015
Сообщений: 12

В базе ничего не хранится, просто задача состоит в том чтоб сделать это просто на js с использованием data у элементов, без баз данных и ajax и php
Ответить с цитированием
  #4 (permalink)  
Старый 27.04.2015, 11:32
Аватар для ksa
ksa ksa вне форума
CacheVar
Отправить личное сообщение для ksa Посмотреть профиль Найти все сообщения от ksa
 
Регистрация: 19.08.2010
Сообщений: 14,228

Сообщение от 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>
Ответить с цитированием
  #5 (permalink)  
Старый 27.04.2015, 11:47
Аватар для ksa
ksa ksa вне форума
CacheVar
Отправить личное сообщение для ksa Посмотреть профиль Найти все сообщения от ksa
 
Регистрация: 19.08.2010
Сообщений: 14,228

Сообщение от 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>
Ответить с цитированием
  #6 (permalink)  
Старый 28.04.2015, 12:48
Интересующийся
Отправить личное сообщение для serhioses Посмотреть профиль Найти все сообщения от serhioses
 
Регистрация: 17.02.2015
Сообщений: 12

Да идеально, спасибо
Не посоветуете сайты, книги, задачники по js (кроме это сайта), я заметил что у меня проблема с составлением алгоритмов при решении задач, как это можно подтянуть не подскажите? Тут очень простое и лаконичное решение, то что мне и нужно
Ответить с цитированием
  #7 (permalink)  
Старый 29.04.2015, 09:07
Аватар для ksa
ksa ksa вне форума
CacheVar
Отправить личное сообщение для ksa Посмотреть профиль Найти все сообщения от ksa
 
Регистрация: 19.08.2010
Сообщений: 14,228

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

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

Тебе остается только самому уповать на свою же практику... Смотреть какие решения предлагают другие на этом форуме, разбираться в них...
А самое главное начать решать самому. Без этого вообще ничего не получится.
Ответить с цитированием
  #8 (permalink)  
Старый 29.04.2015, 10:07
Интересующийся
Отправить личное сообщение для serhioses Посмотреть профиль Найти все сообщения от serhioses
 
Регистрация: 17.02.2015
Сообщений: 12

Дельный совет, спасибо, форум конечно очень хороший
Ответить с цитированием
  #9 (permalink)  
Старый 26.01.2017, 16:57
Аватар для j0hnik
Профессор
Отправить личное сообщение для j0hnik Посмотреть профиль Найти все сообщения от j0hnik
 
Регистрация: 01.12.2016
Сообщений: 3,650

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>


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

Последний раз редактировалось j0hnik, 26.01.2017 в 17:03.
Ответить с цитированием
Ответ



Опции темы Искать в теме
Искать в теме:

Расширенный поиск


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
нужно написать фейк с элементами js в vk totcam Работа 3 27.10.2017 14:42
Прием данных с сервера в EXT JS Rush ExtJS 13 30.03.2012 13:42
помогите написать аналог строки include("index.php?open=1") на js bushstas Общие вопросы Javascript 1 19.07.2009 02:48
помогите написать тесты на js Rizo Ваши сайты и скрипты 5 10.06.2009 07:00
Проблемы с кодировкой при передаче данных во фрейм из js Why? Internet Explorer 12 02.06.2009 16:23