Подставлять ссылку к кнопке
Здравствуйте!
Есть список с категориями (у каждой категории своя ссылка). После выбора категории попадаем на "второй шаг" - там, в том числе, есть кнопка "Далее". Так вот нужно что бы в значение ссылки этой кнопки попадала ссылка выбранной категории. <!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> |
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; }); } если я правильно понял |
да, именно это! Спасибо!
|
Тогда у меня еще один вопрос: Как мне в эту ссылку еще добавить значения из селектов?
<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> Для того, что бы на новой странице можно было сделать фильтрацию по этим параметрам. |
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; }); } структуру сами сделайте какую надо |
да, спасибо еще раз - работает...
Тогда еще 2 вопроса, уж не сочтите за наглость: 1. Можно скрыть эти параметры в адресной строке (т.е. что бы они были и передавались, но не отображались в адресной строке)? 2. Как лучше эти параметры извлекать на открывшейся странице? Это наверное уже не js а html, но тем не менее. |
1. скрыть нельзя. можно передать Post запросом.
добавить в cookie или на если хотите в local storage. 2. в зависимости от того где эти данные будут. |
Igorsrt,
данные серверу нужны или клиенту? |
данные нужно вывести на странице в тексте для начала (тип транспорта, тоннаж транспорта)... а потом еще передать в json строку для вставки в сниппет MODX для фильтра. ну это уже потом думать буду, сейчас хотя бы просто на странице в виде текста вывести
<h1 class="page-title">Перевозка габаритных грузов <span>(тип транспорта, тоннаж транспорта)</span></h1> |
Igorsrt,
лучше конечно чтобы страницу сразу формировал сервер, и GET для это идеален. но если хотите заморочек то вот пожалуйста сохраняйте, потом доставайте, отправляйте и фильтруйте https://developer.mozilla.org/ru/docs/Web/HTTP/Куки https://developer.mozilla.org/ru/docs/Web/API/Storage |
Часовой пояс GMT +3, время: 01:31. |