Question

我有大约50个链接到渲染的仪表板，它们彼此截然不同。但都有两个属性。一个from和一个属性。它们定义了一个包含开始和结束日期的时间范围。

对于大约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用该输入值替换正文中标记的href中的所有from属性。

我有50行看起来像上面的例子，但他们有不同的网址。它们还具有不同的仪表板名称和面板ID。

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

Answer 1

我认为你这一切都错了。您不想更新所有这些链接上的所有href属性，您希望在点击每个链接时调用javascript函数并使其导航到具有/ to属性变量的特定URL。

看一下这个例子：

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，它将完全像链接一样工作，但现在来自和来说都是动态的。

您似乎需要实际设置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链接中的变量

1 个答案: