Answer the question
In order to leave comments, you need to log in
O
O
olsv642021-12-27 12:35:45
olsv64, 2021-12-27 12:35:45
How to add different tags to a page link with tags using checkboxes and UI jQuery slider?
There is such a code. I somehow added the slider values to the link, I'm not strong in JS, you know. Is it possible to add category tags somehow?
<!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> 1 answer(s)
@olsv64
O
olsv64, 2021-12-28 @olsv64
decided to stop at this, when choosing a price, the category drops, he hammered, hammered - he couldn’t and spat
<!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>
Similar questions
A
N
R
S
I
Didn't find what you were looking for?
Ask your questionAsk a Question
731 491 924 answers to any question