gpt4 book ai didi

javascript - 使用已有的链接向 ahref 按钮添加属性

转载 作者:行者123 更新时间:2023-12-01 17:17:31 25 4
gpt4 key购买 nike

我正在尝试向从 ahref html 标记获取的链接添加属性,请有人指导我,我在这方面做错了什么?

链接将从 ahref 标签中获取,并从下拉列表中获取语言和货币,然后最终链接将是"link+"index.php?lang="+lang+"&currency="+currency;"

$(document).ready(function(){
var saveclass = null;

function onChangeHandler() {
const lang = document.querySelector('#lang').value;
const currency = document.querySelector('#currency').value;
var link=document.querySelector('#theButton')..getAttribute('href');
var strLink = link+"index.php?lang="+lang+"&currency="+currency;
document.querySelector('#theButton').setAttribute('href', strLink);

}


onChangeHandler();
document.querySelector('#lang').addEventListener('change', onChangeHandler);
document.querySelector('#currency').addEventListener('change', onChangeHandler);




});
<!DOCTYPE html>
<html lang="en">

<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script type="text/javascript" src="price_billing.js"></script>
</head>

<body>

<select name="" id="lang">
<option value="English">English</option>
<option value="French">French</option>
<option value="Spanish">Spanish</option>
</select>

<select name="" id="currency">
<option value="USD">USD</option>
<option value="EUR">EUR</option>
<option value="MXN">MXN</option>
</select>

<a href="https://alpha.com" id="theButton">Click</a>

<select name="" id="lang">
<option value="English">English</option>
<option value="French">French</option>
<option value="Spanish">Spanish</option>
</select>

<select name="" id="currency">
<option value="USD">USD</option>
<option value="EUR">EUR</option>
<option value="MXN">MXN</option>
</select>

<a href="https://alpha.com" id="theButton">Click</a>


</body>

</html>

最佳答案

我对此进行了尝试。看起来 getAttribute 前面有一个额外的句点 [.]。

工作代码:

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
var saveclass = null;

function onChangeHandler() {
const lang = document.querySelector('#lang').value;
const currency = document.querySelector('#currency').value;
var link=document.querySelector('#theButton').getAttribute('href');
var strLink = link+"/index.php?lang="+lang+"&currency="+currency;
document.querySelector('#theButton').setAttribute('href', strLink);

}

document.querySelector('#lang').addEventListener('change', onChangeHandler);
document.querySelector('#currency').addEventListener('change', onChangeHandler);

});
</script>

<select name="" id="lang">
<option value="English">English</option>
<option value="French">French</option>
<option value="Spanish">Spanish</option>
</select>

<select name="" id="currency">
<option value="USD">USD</option>
<option value="EUR">EUR</option>
<option value="MXN">MXN</option>
</select>

<a href="https://alpha.com" id="theButton">Click</a>

我还拿出了多余的onChangeHandler();因为您已经有运行该函数的更改监听器。

虽然这技术上有效,但我不推荐它。如果用户不断更改选项,它会不断附加新的 URL。示例如下:

https://alpha.com/index.php?lang=French&currency=USD

https://alpha.com/index.php?lang=French&currency=USD/index.php?lang=French&currency=EUR

https://alpha.com/index.php?lang=French&currency=USD/index.php?lang=French&currency=EUR/index.php?lang=Spanish&currency=EUR

https://alpha.com/index.php?lang=French&currency=USD/index.php?lang=French&currency=EUR/index.php?lang=Spanish&currency=EUR/index.php?lang=Spanish&currency=MXN

https://alpha.com/index.php?lang=French&currency=USD/index.php?lang=French&currency=EUR/index.php?lang=Spanish&currency=EUR/index.php?lang=Spanish&currency=MXN/index.php?lang=English&currency=MXN

https://alpha.com/index.php?lang=French&currency=USD/index.php?lang=French&currency=EUR/index.php?lang=Spanish&currency=EUR/index.php?lang=Spanish&currency=MXN/index.php?lang=English&currency=MXN/index.php?lang=English&currency=USD

最好在用户 100% 确定其选项后更改 URL,而不是每次更改都更改。

关于javascript - 使用已有的链接向 ahref 按钮添加属性,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/61352772/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com