|
|
21.11.2018, 09:14
|
|
Профессор
|
|
Регистрация: 21.02.2016
Сообщений: 271
|
|
|
Подставлять ссылку к кнопке
Здравствуйте!
Есть список с категориями (у каждой категории своя ссылка). После выбора категории попадаем на "второй шаг" - там, в том числе, есть кнопка "Далее". Так вот нужно что бы в значение ссылки этой кнопки попадала ссылка выбранной категории.
<!DOCTYPE html>
<html lang="ru">
<head>
<meta charset="UTF-8">
<style>
.section-services_pb {
padding-bottom: 250px;
}
.section-services .services-step-two {
display: none;
}
.section-services .services-step-two_active {
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
}
.section-services .services {
margin-bottom: 30px;
}
.section-services .services-link:hover {
color: #fff;
}
.section-services .services-link_white {
background: #fff;
color: #0d75b9;
}
.section-services .services-link_white:hover {
color: #0d75b9;
}
.section-services .select-row {
border: none;
padding-bottom: 0;
}
.section-services .service-tab {
display: none;
}
.section-services .service-tab_visible {
display: block;
}
.section-services .btn-wrap_alignment_left {
margin-top: 50px;
}
.warning-text {
color: #ff5956;
margin: 30px 0 50px;
}
.services-step {
font-size: 24px;
font-weight: bold;
margin-bottom: 50px;
}
.services-step img {
-webkit-animation: rotate 2s infinite linear;
animation: rotate 2s infinite linear;
vertical-align: middle;
margin-left: 67px;
}
.spinner {
-webkit-transition: all .3s ease;
-o-transition: all .3s ease;
transition: all .3s ease;
}
.spinner_hidden {
opacity: 0;
}
.jq-radio {
background: #fff;
border: 1px solid #181818;
width: 10px;
height: 10px;
}
.jq-radio.focused {
border: 1px solid #181818;
}
.jq-radio.checked .jq-radio__div {
width: 4px;
height: 4px;
}
</style>
</head>
<body>
<section class="section-services section-services_pb pt-js">
<div class="wrapper">
<div class="services-step">ШАГ 1 - выберите категорию услуг, которая вас интересует:</div>
<div class="services">
<div class="services-item services-item_overall-cargo">
<div class="services-item__title">Перевозка габаритных грузов</div>
<div class="services-item__hover-content">
<a href="/link1" class="services-link btn-two btn-two_blue">Выбрать</a>
</div>
</div>
<div class="services-item services-item_oversized-cargo">
<div class="services-item__title">Перевозка негабаритных грузов</div>
<div class="services-item__hover-content">
<a href="/link2" class="services-link services-link_white btn-two btn-two_blue">Выбрать</a>
</div>
</div>
<div class="services-item services-item_temperature-mode">
<div class="services-item__title">Перевозка с температурным режимом</div>
<div class="services-item__hover-content">
<a href="/link3" class="services-link btn-two btn-two_blue">Выбрать</a>
</div>
</div>
<div class="services-item services-item_dangerous-goods">
<div class="services-item__title">Перевозка опасных грузов</div>
<div class="services-item__hover-content">
<a href="/link4" class="services-link services-link_white btn-two btn-two_blue">Выбрать</a>
</div>
</div>
<div class="services-item services-item_special-transport">
<div class="services-item__title">Перевозка спецтранспортом</div>
<div class="services-item__hover-content">
<a href="/link5" class="services-link btn-two btn-two_blue">Выбрать</a>
</div>
</div>
<div class="services-item services-item_partial-load">
<div class="services-item__title">Перевозка догрузом</div>
<div class="services-item__hover-content">
<a href="/link6" class="services-link services-link_white btn-two btn-two_blue">Выбрать</a>
</div>
</div>
</div>
<div id="step2" class="services-step">ШАГ 2 - выберите тоннаж и тип требуемого транспорта:</div>
<div class="select-row services-step-two">
<div class="select-row__item">
<div class="field-title">Тоннаж:</div>
<select >
<option>Выберите тоннаж</option>
<option>5 тонн</option>
<option>7 тонн</option>
<option>10 тонн</option>
<option>20 тонн</option>
</select>
</div>
<div class="select-row__item">
<div class="field-title">Тип автомобиля:</div>
<select >
<option>Выберите тип автомобиля</option>
<option>Тентованный</option>
<option>Бортовой</option>
<option>Изотермический</option>
<option>Рефрижиратор</option>
</select>
</div>
<!-- вот сюда нужно ссылку подставлять -->
<div class="btn-wrap_alignment_left"><a href="/mylink" class="btn-two btn-two_blue">Далее</a></div>
</div>
</div>
</section>
<script src="https://code.jquery.com/jquery-3.3.1.min.js" integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8=" crossorigin="anonymous"></script>
<script>
if($('.services-link').length) {
$('.services-link').click(function(e){
e.preventDefault();
$('.section-services').removeClass('section-services_pb');
$('.services-step-two').addClass('services-step-two_active');
$('.spinner').addClass('spinner_hidden');
$('html,body').stop().animate({ scrollTop: $('#step2').offset().top - 150 }, 1000);
e.preventDefault();
$('.services-item').removeClass('active');
$(this).parents('.services-item').addClass('active');
return false;
});
}
</script>
</body>
</html>
|
|
21.11.2018, 09:24
|
 |
Профессор
|
|
Регистрация: 01.12.2016
Сообщений: 3,650
|
|
if($('.services-link').length) {
$('.services-link').click(function(e){
e.preventDefault();
$('.section-services').removeClass('section-services_pb');
$('.services-step-two').addClass('services-step-two_active');
$('.spinner').addClass('spinner_hidden');
$('html,body').stop().animate({ scrollTop: $('#step2').offset().top - 150 }, 1000);
e.preventDefault();
$('.services-item').removeClass('active');
$(this).parents('.services-item').addClass('active');
$('.btn-two').attr('href', this.href);
return false;
});
}
если я правильно понял |
|
21.11.2018, 09:44
|
|
Профессор
|
|
Регистрация: 21.02.2016
Сообщений: 271
|
|
|
да, именно это! Спасибо!
|
|
22.11.2018, 09:39
|
|
Профессор
|
|
Регистрация: 21.02.2016
Сообщений: 271
|
|
Тогда у меня еще один вопрос: Как мне в эту ссылку еще добавить значения из селектов?
<div class="select-row__item">
<div class="field-title">Тоннаж:</div>
<select >
<option>Выберите тоннаж</option>
<option value="5 тонн">5 тонн</option>
<option value="7 тонн">7 тонн</option>
<option value="10 тонн">10 тонн</option>
<option value="20 тонн">20 тонн</option>
</select>
</div>
<div class="select-row__item">
<div class="field-title">Тип автомобиля:</div>
<select >
<option>Выберите тип автомобиля</option>
<option value="Тентованный">Тентованный</option>
<option value="Бортовой">Бортовой</option>
<option value="Изотермический">Изотермический</option>
<option value="Рефрижиратор">Рефрижиратор</option>
</select>
</div>
Для того, что бы на новой странице можно было сделать фильтрацию по этим параметрам. |
|
22.11.2018, 13:18
|
|
Профессор
|
|
Регистрация: 01.12.2016
Сообщений: 3,650
|
|
if($('.services-link').length) {
var sel = document.querySelectorAll('select');
$('.services-link').click(function(e){
e.preventDefault();
$('.section-services').removeClass('section-services_pb');
$('.services-step-two').addClass('services-step-two_active');
$('.spinner').addClass('spinner_hidden');
$('html,body').stop().animate({ scrollTop: $('#step2').offset().top - 150 }, 1000);
e.preventDefault();
$('.services-item').removeClass('active');
$(this).parents('.services-item').addClass('active');
$('.btn-wrap_alignment_left').prop('href', this.href);
return false;
});
$('.btn-wrap_alignment_left').click(function(e){
e.preventDefault();
location = this.href+'?tonazh='+sel[0].value+'&tip='+sel[1].value;
});
}
структуру сами сделайте какую надо |
|
22.11.2018, 14:27
|
|
Профессор
|
|
Регистрация: 21.02.2016
Сообщений: 271
|
|
|
да, спасибо еще раз - работает...
Тогда еще 2 вопроса, уж не сочтите за наглость:
1. Можно скрыть эти параметры в адресной строке (т.е. что бы они были и передавались, но не отображались в адресной строке)?
2. Как лучше эти параметры извлекать на открывшейся странице? Это наверное уже не js а html, но тем не менее.
|
|
22.11.2018, 15:40
|
|
Профессор
|
|
Регистрация: 01.12.2016
Сообщений: 3,650
|
|
|
1. скрыть нельзя. можно передать Post запросом.
добавить в cookie или на если хотите в local storage.
2. в зависимости от того где эти данные будут.
|
|
22.11.2018, 15:52
|
|
Профессор
|
|
Регистрация: 01.12.2016
Сообщений: 3,650
|
|
|
Igorsrt,
данные серверу нужны или клиенту?
|
|
22.11.2018, 16:08
|
|
Профессор
|
|
Регистрация: 21.02.2016
Сообщений: 271
|
|
данные нужно вывести на странице в тексте для начала (тип транспорта, тоннаж транспорта)... а потом еще передать в json строку для вставки в сниппет MODX для фильтра. ну это уже потом думать буду, сейчас хотя бы просто на странице в виде текста вывести
<h1 class="page-title">Перевозка габаритных грузов <span>(тип транспорта, тоннаж транспорта)</span></h1>
|
|
|
|
