在 html 中的 href link 中设置变量

Question

我有大约 50 个指向呈现的仪表板的链接，这些仪表板彼此之间非常不同。但它们都有两个属性。一个 from 和一个 to 属性。他们定义了一个包含开始日期和结束日期的时间范围。

对于大约 50 个链接中的每一个，正文中都有一个 html 标记，链接本身就是 href 属性。请以此为例：

<a id="id1" download="picture.png" href="https://url.com/render/dashboard-solo/db/dashboardname?panelId=5&from=01012017&to=04012017&width=1000&height=50"/>

现在我需要两个输入字段来设置日期。例如，如果我在 from 属性的输入字段中键入 02022017，我希望 javascript 将正文中标签的 hrefs 中的所有 from 属性替换为该输入值。

我有大约 50 行看起来像上面的示例，但它们有不同的 url。它们还具有不同的仪表板名称和面板 ID。

你有什么想法吗？当然我可以设置一个 javascript 和两个输入表单，但我不知道如何将 href 属性部分设置为变量。谢谢

Answer 1

我认为你的做法全错了。您不想更新所有这些 link 上的所有 href 属性，您想在单击每个属性时调用 javascript 函数并使其导航到特定的 [=43] =] 具有变量 from/to 属性。

看看这个例子：

function goToDashboard(panelId){
    var fromValue = document.getElementById("from").value;
    var toValue = document.getElementById("to").value;
    var uri = "https://url.com/render/dashboard-solo/db/dashboardname?panelId=" + panelId + "&from=" + fromValue + "&to=" + toValue + "&width=1000&height=50";
    console.log(uri);
    return false;
}

<a id="id1" download="picture.png" href="#" onClick="return goToDashboard(5)">Go to dashboard</a>

<hr>
From: <input id="from" value="01012017">
To: <input id="to" value="04012017">

如果您只是将 console.log(uri) 更改为 location.href=uri，它将完全像 link 一样工作，但现在 from 和 to 是动态的。

看来您需要实际设置 href 属性。这个也可以。

function goToDashboard(link, panelId){
    var fromValue = document.getElementById("from").value;
    var toValue = document.getElementById("to").value;
    var uri = "https://url.com/render/dashboard-solo/db/dashboardname?panelId=" + panelId + "&from=" + fromValue + "&to=" + toValue + "&width=1000&height=50";
    link.setAttribute("href",uri);
    link.click();
    return false;
}

<a id="id1" download="picture.png" href="#" onClick="return goToDashboard(this, 5)">Go to dashboard</a>

<hr>
From: <input id="from" value="01012017">
To: <input id="to" value="04012017">

在 html 中的 href link 中设置变量

Setting variables in a href link in html

html

javascript

jquery

href