尝试基于 <input> 按钮动态替换 url &option 值

Question

我正在尝试动态替换 url 值，我正在使用替换，因为我不希望在每次点击时重复该值

我当然不是世界上最好的程序员，而且我不确定我的语法是否有效。

我试图在下面完成的一般想法是页面上有几个 url，在任何给定时间只显示一个我使用滑块以无缝方式隐藏/显示每个 url。

我想将位置传递给 javascript 函数（它将是一个数字），该函数应该获取位置编号并替换页面上所有 href="" 中的部分。

但我似乎无法让它工作。

function getlocation(loc) {
  $('a').each(function() {
    var location = $(this).attr('href');
    $(this).attr('href').replace("&location=100", "&location=loc");
    console.log('error');
  });
}

<a class="button" href="#get.php&location=100">Test</a>
<br>
<br>

<a class="button" href="#get.php&location=100">Test</a>
<br>
<br>


<feildset>
  <input id="mtl" name="location" type="radio" checked>
  <label for="mtl" onclick="getlocation(mtl)">Montreal</label>
  <br>
  <br>
  <input id="frkfrt" name="location" type="radio" onclick="">
  <label for="frkfrt" onclick="getlocation(frkfrt)">Frankfurt</label>



</feildset>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>

Answer 1

• frkfrt 和 mtl 不是变量 - 您希望将其作为 字符串 传递。但内联事件处理程序与 HTML 中的 eval 一样糟糕 - 改为使用 Javascript 正确附加处理程序，以降低此类问题的可能性。
• replace 不会改变原始字符串 - 字符串是不可变的。相反，您需要显式分配到hrefs 才能更改它们。
• 在getlocation 中，您必须连接 loc 变量与&location=

['mtl', 'frkfrt'].forEach(loc => {
  document.querySelector(`[for="${loc}"]`).onclick = () => getlocation(loc);
});


function getlocation(loc) {
  document.querySelectorAll('a').forEach(a => {
    a.href = a.href.replace(/&location=.*$/, "&location=" + loc);
  });
}

<a class="button" href="#get.php&location=100">Test</a>
<br>
<br>

<a class="button" href="#get.php&location=100">Test</a>
<br>
<br>


<feildset>
  <input id="mtl" name="location" type="radio" checked>
  <label for="mtl">Montreal</label>
  <br>
  <br>
  <input id="frkfrt" name="location" type="radio">
  <label for="frkfrt">Frankfurt</label>



</feildset>

Answer 2

如果我很了解您的需求，请尝试替换

$(this).attr('href').replace("&location=100", "&location=loc");

与

$(this).attr('href').replace("&location=100", "&location=" + loc);