Задать вопрос
@olsv64
В PHP не разбираюсь
слайдер

Как добавить к ссылке на страницу тегов, используя чекбоксы и слайдер UI jQuery, разные теги?

Есть такой код. Значения слайдера я к ссылке кое-как добавил, не силен в JS, знаете ли. Можно ли как-то плюсовать и теги категорий?
<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="utf-8">
	<meta http-equiv="X-UA-Compatible" content="IE=edge">
	<meta name="viewport" content="width=device-width, initial-scale=1">
	<title>Диапазон цен</title>
	<link href="bootstrap/css/bootstrap.min.css" rel="stylesheet">
	<link rel="stylesheet" href="ui/jquery-ui.css">
	<link rel="stylesheet" href="style.css">
<!--[if lt IE 9]>
<script src="https://oss.maxcdn.com/html5shiv/3.7.3/html5shiv.min.js"></script>
<script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
<![endif]-->
</head>
<body>

	<div class="container content">
		<div class="form-group">
			<form class="side">
				<h4 class="col-sm-12">Категории</h4>
				<div class="col-sm-12">
					<p><input type="checkbox" name="cat1" id="cat1" value="плагины"> Категория 1</p>
					<p><input type="checkbox" name="cat2" id="cat2" value="поиск"> Категория 2</p>
					<p><input type="checkbox" name="cat3" id="cat3" value="календарь"> Категория 3</p>
				</div>
				<h4 class="col-sm-12">Диапазон цены</h4>
				<div class="col-sm-12">
					<div id="price"></div>
					<div id="slider-range"></div>
					<a href="#" id="link-range" target="_blank">Перейти</a>
					
				</div>
			</form>
		</div>
	</div>

	<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
	<script src="bootstrap/js/bootstrap.min.js"></script>
	<script src="ui/jquery-ui.js"></script>

	<script>
	$(function(){
		$( "#slider-range" ).slider({
			range: true,
			min: 0,
			max: 1000,
			values: [ 0, 1000 ],
			step: 10,
			slide: function( event, ui ) {
				$( "#price" ).text( "₽" + ui.values[ 0 ] + " - ₽" + ui.values[ 1 ] );
				$( "#link-range" ).attr( "href", "https://mydomen.ru/tags/?tags=" + ui.values[ 0 ] + "-" + ui.values[ 1 ] );
			}
		});
		$( "#price" ).text( "от ₽" + $( "#slider-range" ).slider( "values", 0 ) + " - до ₽" + $( "#slider-range" ).slider( "values", 1 ) );
		$( "#link-range" ).attr( 'href', 'https://mydomen.ru/tags/?tags=' + $( "#slider-range" ).slider( "values", 0 ) + "-" + $( "#slider-range" ).slider( "values", 1 ));
	});
	</script>

</body>
</html>
  • Вопрос задан
  • 43 просмотра
Комментировать
Подписаться 1 Средний Комментировать
Пригласить эксперта
Ответы на вопрос 1
@olsv64 Автор вопроса
В PHP не разбираюсь
решил остановиться на этом, при выборе цены категорию сбрасывает, долбился-долбился - не смог и плюнул
<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="utf-8">
	<meta http-equiv="X-UA-Compatible" content="IE=edge">
	<meta name="viewport" content="width=device-width, initial-scale=1">
	<title>Диапазон цен</title>
	<link href="bootstrap/css/bootstrap.min.css" rel="stylesheet">
	<link rel="stylesheet" href="ui/jquery-ui.css">
	<link rel="stylesheet" href="style.css">
<!--[if lt IE 9]>
<script src="https://oss.maxcdn.com/html5shiv/3.7.3/html5shiv.min.js"></script>
<script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
<![endif]-->
</head>
<body>

	<div class="container content">
		<div class="col-sm-3">
			
			<h4>Диапазон цены</h4>
			<div>
				<div id="price"></div>
				<div id="slider-range"></div>
			</div>
			<h4>Категории</h4>
			<div>
				<p><label><input class="check" type="radio" name="cat" id="cat0" value="" checked> Все</label></p>
				<p><label><input class="check" type="radio" name="cat" id="cat1" value="плагины+"> Категория 1</label></p>
				<p><label><input class="check" type="radio" name="cat" id="cat2" value="контакты+"> Категория 2</label></p>
				<p><label><input class="check" type="radio" name="cat" id="cat3" value="календарь+"> Категория 3</label></p>
			</div>
			<p>
				<a class="btn btn-primary" href="https://mydomen.ru/tags/?tags=" id="link-range" target="_blank">Перейти</a>					
			</p>
		</div>
	</div>

	<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
	<script src="bootstrap/js/bootstrap.min.js"></script>
	<script src="ui/jquery-ui.js"></script>

	<script>
		$(function(){
			var link = $("#link-range").attr("href");			
			$(".check").on("change", function(){	
				var a_href = $('.check:checked').val();			   
				var links = link + a_href;
				$("#link-range").attr('href', links + $("#slider-range").slider("values", 0) + "-" + $("#slider-range").slider("values", 1));
			});
			$("#slider-range").slider({
				range: true,
				min: 0,
				max: 1000,
				values: [ 0, 1000 ],
				step: 10,
				slide: function( event, ui ) {
					$("#price").text("₽" + ui.values[ 0 ] + " - ₽" + ui.values[ 1 ]);
					$("#link-range").attr("href", link + ui.values[ 0 ] + "-" + ui.values[ 1 ]);
					$("#cat0").prop('checked', true);
				}
			});	
			
			$("#price").text( "от ₽" + $("#slider-range").slider("values", 0) + " - до ₽" + $("#slider-range").slider("values", 1));			
		});

	</script>

</body>
</html>
Ответ написан
Комментировать
Комментировать
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы
Вакансии с Хабр Карьеры
Backend Developer в бьюти-платформу LUUK
УК «Решения» • Москва
от 200 000 ₽
Angular frontend developer, разработчик middle+
IT Force • Краснодар
от 200 000 ₽
Middle+ Marketing manager
Правое полушарие Интроверта
от 120 000 ₽
Ещё вакансии
Заказы с Хабр Фриланса
Доработать клиентское приложение для GTA 5 на C#
20 апр. 2024, в 00:51
1000 руб./за проект
Верстка и логика формы выбора билетов в зале для покупки
20 апр. 2024, в 00:43
10000 руб./за проект
Разработать формирование УПД на Java
20 апр. 2024, в 00:28
20000 руб./за проект
Ещё заказы