1

Подскажите, пожалуйста, как по приложенному коду сделать переход по сгенерированной ссылке при активации третьего чекбокса-кнопки, из условия что первый и второй тоже содержат свой кусок url, а третья является финальной?

То есть, получается: первый чекбокс (site.ru/) + второй чекбокс(category/) + третий чекбокс(item.html) = site.ru/category/item.html И вот когда уже нажат третий чекбокс, должно переходить по полной ссылке site.ru/category/item.html

$('#btn').click(function(){
	$('#result').html('');
	$('input:checkbox:checked').each(function(){
		$('#result').append($(this).val());
	});
});
body {
	font-size:14px;
	padding: 15px 20px;
}
a {
  baclground: red;
  width: 10px;
  height: 10px;
}
.no-vis  {
 position: relative;
  width: 100px;
  height: 20px;
}
.no-vis input {
  opacity: 0;
  top: 0;
  left: 0;
  width: 100px;
  height: 20px;
  position:absolute;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="text-center">
	<p>
		<label><input class="form-check-input" type="checkbox" value="/sloman-ekarn/">Сломан экран</label><br>
		<label><input class="form-check-input" type="checkbox" value="mi/">Mi</label><br>
	</p>
	<p>
    
    
    
		<button id="btn" class="no-vis btn btn-sm btn-outline-primary"><label><input class="form-check-input" type="checkbox" value="sloman-ekran-mi-8.html"></label>Xiaomi Mi 8</button>
	</p> 
  <p id="result" class="text-success"><a href=""></a></p>
</div>

2
  • Укажите, пожалуйста, какая в результате должна быть ссылка, в каком порядке могут быть части - а то сейчас есть /sloman-ekarn/, mi/ и sloman-ekran-mi-8.html.
    – Coder
    20 окт 2019 в 18:58
  • @Coder site.ru/sloman-ekarn/mi/sloman-ekran-mi-8.html
    – Alex
    20 окт 2019 в 18:59

1 ответ 1

3
       $('#btn').click(function(){
            $('#result').html('');
            $('input:checkbox:checked').each(function(){        
            window.location.href = $(this).val();
             //alert($(this).val());
            });
        });

$('#btn').on('click',function(){
  let d = $('input:checkbox:checked').map(function(){ 
return $(this).val();
}).get().join('');
let res = 'https://site.ru/' + d + $('#a3').val();
   //window.location.href = res;
	$('#result a').attr("href", res).text(res);
});
body {
	font-size:14px;
	padding: 15px 20px;
}
a {
  /*background: red;*/
  width: 10px;
  height: 10px;
}
.no-vis  {
 position: relative;
  width: 100px;
  height: 20px;
}
.no-vis input {
  opacity: 0;
  top: 0;
  left: 0;
  width: 100px;
  height: 20px;
  position:absolute;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="text-center">
    <label><input class="form-check-input"  type="checkbox" value="sloman-ekarn/">Сломан экран</label><br>
    <label><input class="form-check-input"  type="checkbox" value="mi/">Mi</label><br>
    <input  id="a3" type="hidden" value="sloman-ekran-mi-8.html">
    <button id="btn" class="no-vis btn btn-sm btn-outline-primary">Xiaomi Mi 8</button>
    <p id="result" class="text-success"><a href="">Результат</a></p>
</div>
Должно быть: site.ru/sloman-ekarn/mi/sloman-ekran-mi-8.html

10
  • 1
    Спасибо за ответ! Подскажите, пожалуйста, почему по Вашему коду он вызывает 3 окна alert, как будто ссылка разделяется на три разные? К сожалению, не работает на сайте, необходимо, чтобы плюсовались все три части ссылки (третья заложена в саму button) и должна подсавлять свое значение и одновременно переходить на ссылку из трех частей
    – Alex
    20 окт 2019 в 18:04
  • 1
    Это в хроме так, в firefox один раз - да это и не важно - алерт здесь не нужен - переход будет спазу по первому совпадению условий. Ага - ну, нужно подумать тогда.
    – Coder
    20 окт 2019 в 18:07
  • 1
    Спасибо! Да, я знаю, что алерт не нужен, что он для отладки. Сейчас попробую на радио поменять
    – Alex
    20 окт 2019 в 18:08
  • 1
    Пожалуйста) - немного бы по-подробней в условии про три части ссылки - а то не совсем понятно.
    – Coder
    20 окт 2019 в 18:11
  • 1
    Да - я не предполагал, что есть три части, потому и предложил единственный выбор.
    – Coder
    20 окт 2019 в 18:23

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.