Question

首先，让我解释一下我想要实现的目标。我目前有8个小网站，除了标题图片和href链接之外都是相同的。

我正在寻找一种方法，以便在每次需要更新这些页面时最大限度地减少维护和人为错误的可能性。

例如，假设我有两个指向特定状态登录页面的链接。

<a href="https://www.mypage.com/studentLogin?stateId=WA">Student Login</a>
<a href="https://www.mypage.com/teacherLogin?stateId=WA">Teacher Login</a>

过去，我一直在制作更新的HTML副本，然后搜索并替换＆＃34; stateId = WA＆＃34; for＆＃34; stateId = MI＆＃34;

我开始看看是否可以使用javascript创建URL，只需使用某个函数附加2位数的状态ID。这样我只需要更新代码，然后复制它并在一个文件中将2位数的状态ID替换为一个文件。

我使用以下外部JavaScript文件

取得了进展

function getParam() {
return 'WA';
}

function getLink() {
document.getElementById('studentLogin').href = 'https://www.mypage.com/studentLogin?stateId=' + getParam();
}

function getLink() {
document.getElementById('teacherLogin').href = 'https://www.mypage.com/teacherLogin?stateId=' + getParam();

然后在HTML中使用它

<a href="#" onclick="getLink();" id="studentLogin">CLICK ME</a>

这很有效，直到我发现我在HTML中具有多个具有相同ID的元素。例如，其中一个页面在菜单中有一个指向学生登录的链接，并且还有一个指向HTML主要内容中相同位置的链接，只有其中一个可以使用。

所以我想我可以在外部javascript文件中创建多个函数，每个函数都有自己的ID，然后更新HTML以调用新的ID，但我正在寻找更好的方法。

我真正关心的是最小化维护，因为我目前有8个这样的着陆页，但在不久的将来我们可以拥有更多。由于这些页面只有4个不同的链接，如果我能弄清楚如何将整个链接存储在变量中，只需在

中调用该变量就可以了。

<a> tag

感谢您的帮助。

Answer 1

您可以向相关链接添加类，然后使用document.getElementsByClassName("myclass")

获取元素

<a href="#" class="myclass">test1</a><a href="#" class="myclass">test2</a>

在JS中：

var links = document.getElementsByClassName("myclass")

这会使链接成为一个数组，其中包含您可以迭代以应用修改的所有链接。

Answer 2

听起来像是渐进式增强的工作。

我建议你在html链接中添加一个属性;数据状态变更。然后，您编写的任何未来链接都只需添加属性。

//keep the base url in the tag
<a href="https://www.mypage.com/studentLogin" data-has-state>Click Me<a>

//now using jquery attach to all links that have that data- element.
$('body').on('click', '[data-has-state]', function(e){
   // eat the click
   e.preventDefault();

   //get the url
   var url = $(this).attr('href') + '?stateId=' + getParam();

   window.location = url;
);

您也可以使用css类代替html数据属性。那就是。

 $('body').on('click', '.someCssClass', function(e){
       // eat the click
       e.preventDefault();

       //get the url
       var url = $(this).attr('href') + '?stateId=' + getParam();

       window.location = url;
    );

如何使用javascript将链接插入HTML，而不受document.getElementById的限制

2 个答案: