尝试根据 <input> 按钮动态替换 url &option 值
Trying to dynamically replace a url &option value based on <input> button
我正在尝试动态替换 url 值,我使用替换是因为我不希望每次点击时都重复该值
我当然不是世界上最好的编码员,我不确定我的语法是否有效。
我在下面尝试实现的总体思路是页面上有几个 url,在任何给定时间只显示一个我使用滑块 hide/show 每个 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>
- frkfrt 和 mtl 不是变量 - 您希望将其作为 string 传递。但是内联事件处理程序与 HTML 中的
eval
一样糟糕 - 使用 Javascript 正确附加处理程序,以减少此类问题的可能性。
replace
不会改变原始字符串 - 字符串是不可变的。相反,您需要显式 分配 到 href
以更改它们。
- 在
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>
如果我很明白你需要什么,试试替换
$(this).attr('href').replace("&location=100", "&location=loc");
和
$(this).attr('href').replace("&location=100", "&location=" + loc);
我正在尝试动态替换 url 值,我使用替换是因为我不希望每次点击时都重复该值
我当然不是世界上最好的编码员,我不确定我的语法是否有效。
我在下面尝试实现的总体思路是页面上有几个 url,在任何给定时间只显示一个我使用滑块 hide/show 每个 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>
- frkfrt 和 mtl 不是变量 - 您希望将其作为 string 传递。但是内联事件处理程序与 HTML 中的
eval
一样糟糕 - 使用 Javascript 正确附加处理程序,以减少此类问题的可能性。 replace
不会改变原始字符串 - 字符串是不可变的。相反,您需要显式 分配 到href
以更改它们。- 在
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>
如果我很明白你需要什么,试试替换
$(this).attr('href').replace("&location=100", "&location=loc");
和
$(this).attr('href').replace("&location=100", "&location=" + loc);