根据 <a> Javascript 和 Elementor 的选择更改 href

Question

我当前正在Elementor中使用HTML项。我看到过类似的问题，但似乎没有一个Javascript能满足我的要求。我需要能够根据select中选择的内容更改标记的href。我已尝试删除href，然后添加新的href。我尝试了几种不同的选择，但似乎都不起作用。如有任何帮助，我们将不胜感激。这是我目前的代码，但当它运行时，它只接受1 href，之后就不会更改了。当从选择中选择不同的项目时，此选项会发生更改。

我的HTML如下：<a class="ButtonClassAdd" id="ButtonClassAdd" href="#" onclick="AddSingle();return false;" rel="nofollow">Add to Cart</a>

那么我的Javascript是：

function ChangeHref()
{
switch (StrUser)
{
case "Product1":
var AddtoCartLink =  document.getElementById("ButtonClassAdd");
AddtoCartLink.href = "Product1Link";
break;
case "Product2":
var AddtoCartLink =  document.getElementById("ButtonClassAdd");
AddtoCartLink.href = "Product2Link";
break;
}
}

我也试过：

function ChangeHref()
{
switch (StrUser)
{
case "Product1":
var AddtoCartLink =  document.getElementById("ButtonClassAdd");
AddtoCartLink.removeAttribute("href");
AddtoCartLink.setAttribute("href", "ProductLink1");
break;
case "Product2":
var AddtoCartLink =  document.getElementById("ButtonClassAdd");
AddtoCartLink.removeAttribute("href");
AddtoCartLink.setAttribute("href", "ProductLink2");
break;
}
}

编辑：我已经更新了我的HTML。这是有效的，但我不需要重定向。

<div class="ButtonContainter" style="width:200pt;">
<div class="ButtonClass"  style="padding-left:65pt;">
<a class="ButtonClassAdd" id="ButtonClassAdd"  rel="nofollow">Add to Cart</a>
</div>

Answer 1

我对您发布的HTML片段有点困惑，因为<a>标记的onclick属性没有调用您提供的javascript函数？此外，您可能可以安全地从该标签中删除; return false;。最后，确保javascript代码包含在页面底部。

您的第一个javascript解决方案应该可以工作(来源：https://www.w3schools.com/jsref/prop_anchor_href.asp)