使用js动态替换现有的HTML链接？

Question

我正在使用Joomla，并使用单选框选择购买选项。 一切正常，我能够动态更新显示给用户的信息。

我的问题是在他们选择选项后更新购买链接。 我当前用于更新前端的js代码是：

jQuery(function($){
$(document).ready(function(){
$('#pricing').text('R'+'<?php echo (int)$opt1_o_price ?>');
$('#savings').text('R'+'<?php echo $opt1_save ?>');
$('#discount').text(Math.round('<?php echo $perc1 ?>')+'%');
}); 
$('.item').on('change',function(){
$('#pricing').text('R'+($(this).data('price')));
$('#savings').text('R'+($(this).data('price')-$(this).data('after')));
$('#discount').text(Math.round(100-
($(this).data('after')/$(this).data('price')*100))+'%');
$('input[name=sku]').val($(this).data('sku'));

用于生成链接的代码是：

<a href="<?php echo JRoute::_('my-groupbuy-cart?&task=add_to_cart&id='.$cmgbstore_id).'&option_id=1'; ?>"</a>

我已经可以使用“ $ cmgbstore_id”来选择ID，因为它会在页面加载时加载，但是我需要能够通过使用在收音机中选择的选项来更改链接末尾的“ option_id”框。 该值将始终为“ 1”，“ 2”或“ 3”。 我的广播框代码的示例是：

<div class="product-options">
<div class="option-input">
     <input id="1" type="radio" value= "1" name="product-option" class="radio item" checked="checked" data-sku="1001" data-price="<?php echo (int)$opt1_o_price ?>" data-save="<?php echo (int)$opt1_save?>" data-after="<?php echo (int)$opt1_d_price ?>" />
      </div>
      <label for="1" class="option-detail">
        <span class="option-title"><?php echo $opt1_title ?></span>
        <span class="option-price">R<?php echo $opt1_o_price ?></span>
        <span class="option-was-price">R<?php echo $opt1_d_price ?></span>
        <span class="option-discount">Save R<?php echo $opt1_save .'.00'?></span>
</label>

我尝试在js中使用append选项，但是每次选项更改时，都会添加另一个购买按钮。 此外，它还会添加到页面末尾，而不是原始购买按钮所在的位置。 我尝试的代码是这样的：

var link = document.createElement('a');
link.setAttribute('href', 'my-groupbuy-cart?&task=add_to_cart&id='+'<?php echo $cmgbstore_id ?>'+'&option_id=1');
link.innerHTML = "BUY NOW";
$('body').append(link);

我很乐意提出建议，非常感谢您的帮助！ 提前致谢。

Answer 1

使用对我最初的问题的答复来弄清楚。 我所做的，如果别人需要它：DEMO - https://jsfiddle.net/nbucona8/4/

它比我想象的要简单，但是正如上面@IncredibleHat所说，我需要使用$( selector ).attr('href','http://new/value'); ，所以我做到了：

$( "a[name='buy-button']" ).attr("href","/somelink/"+ dealid +"&option_id="+ $(this).attr("value"));

它引用名称为“ buy-button”的任何<a>元素，并将href更改为正确的option_id。

因此，我使用以下方式致电购买链接：

<a name="buy-button" href=""> BUY NOW! </a>

并且每当单选框选项更改时，它都会通过使用以下命令更改option_id：

 $(this).attr("value")

在链接的末尾。

谢谢大家的帮助。