Добавить ID переключателя в href по клику

275
23 июня 2017, 08:45

Добавляю в href ИД переключателя по клику, но при каждом нажатии на переключатель, ИД добавляется снова и снова, а нужно только один, попробовал очистить href при нажатии, не срабатывает. Подскажите как правильно реализовать?

jQuery(document).on('click', '.radio', function() { 
  var $link = jQuery('#link'), 
     href = $link.attr('href').replace(/^(.+)\?.+$/, '$1'); 
     $link.attr('href', href + '-' + $(this).attr("id")); 
     console.log( $link.attr('href')); 
   
});
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script> 
<form class="row-flex radio-input"> 
<div><input id="casco" class="radio" name="gender" type="radio" /><label for="casco">Obre viva (casco)</label></div> 
<div><input id="costado" class="radio" name="gender" type="radio" /><label for="costado">Obre muerta (costado)</label></div> 
</form> 
<a id="link" class="boton-ir-p my-btn bgr" href="velero-quilla-corrida"> Siguente</a>

Answer 1

Вот как я сделал, после загрузки страницы в переменную храню значение href-a, а потом каждый раз добавляю в текущий href переменную плюс id radio кнопки.

<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script> 
<form class="row-flex radio-input"> 
<div><input id="casco" class="radio" name="gender" type="radio" /><label for="casco">Obre viva (casco)</label></div> 
<div><input id="costado" class="radio" name="gender" type="radio" /><label for="costado">Obre muerta (costado)</label></div> 
</form> 
<a id="link" class="boton-ir-p my-btn bgr" href="velero-quilla-corrida"> Siguente</a> 
 
<script> 
    jQuery(document).ready(function(){ 
         
//        После загрузки в переменную храним атрибут href 
        var link_href = jQuery('#link').attr('href'); 
        jQuery(document).on('click', '.radio', function() { 
            var $link = jQuery('#link'), 
            $link.attr('href', link_href + '-' + $(this).attr("id")); 
            console.log( $link.attr('href')); 
 
        }); 
    }); 
     
     
</script>

Answer 2

На первый клик запоминаем первоначальный атрибут href в data-href и используем его:

$(document).on('click', '.radio', function() { 
  var $link = jQuery('#link'); 
  var href = $link.data('href'); 
  if (!href) { 
    href = $link.attr('href'); 
    $link.data('href', href); 
  } 
  $link.attr('href', href + '-' + $(this).attr("id")); 
  console.log($link.attr('href')); 
});
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script> 
<form class="row-flex radio-input"> 
  <div><input id="casco" class="radio" name="gender" type="radio" /><label for="casco">Obre viva (casco)</label></div> 
  <div><input id="costado" class="radio" name="gender" type="radio" /><label for="costado">Obre muerta (costado)</label></div> 
</form> 
<a id="link" class="boton-ir-p my-btn bgr" href="velero-quilla-corrida"> Siguente</a>

READ ALSO
jqery загрузчик фото (изменить ссылку)
jQuery

jqery загрузчик фото (изменить ссылку)

Подскажите, пжлст, как изменить вид ссылки? Имеется загрузчик который подгружает налету изображенияПроблема состоит в том, что он исполняется...

 294
jquery, добавить класс по клику
jQuery

jquery, добавить класс по клику

Добрый вечерРебят, помогите пожалуйста

 355
Калькулятор цен с
jQuery

Калькулятор цен с

С помощью <input type=range> задаем количество товараЦена единицы товара, перечисленная в массиве tariff[75,70,66,62,58,55] колеблется в зависимости от количества,...

 326
Ajax - показать кнопку если файл существует
jQuery

Ajax - показать кнопку если файл существует

Как показать кнопку если файл существует на сервере или скрыть кнопку если файла нет (можно с jquery или без), при этом периодически проверять...

 244