如何使用 JavaScript 将不同的基本 href 设置或附加到不同的链接？

Question

我想通过为超链接设置多个基本 href 来减少网页代码中的混乱。具有相同基本 href 的链接也具有相同的 CSS 类。使用 JavaScript，有没有办法将基本 href 附加到相对链接？这很难解释，但这里有一个例子：

<a class="blue" href="sad1.html">Sad 1</a>
<a class="blue" href="sad2.html">Sad 2</a>
<a class="red" href="angry1.html">Angry 1</a>
<a class="red" href="angry2.html">Angry 2</a>

我想为所有带有蓝色类的链接附加一个基本href，并为所有带有红色类的链接附加一个不同的基本href。我实际上将在文档中添加几个类，但如果有人可以提供工作示例，我可以完成代码。我的页面有数百个链接，我经常更新，所以我需要尽可能修剪 html。我精通 HTML 和 CSS，但我仍在努力学习 JavaScript。谢谢。

Answer 1

function absolutizeHref(klass, base) {
  var nodes = document.querySelectorAll("." + klass + "[href]");
  Array.prototype.forEach.call(nodes, function(node) {
    var href = node.getAttribute("href");
    node.setAttribute("href", base + href);
  });
}


document.addEventListener("DOMContentLoaded", function(event) {
  absolutizeHref("blue", "http://example.com/blue/");
  absolutizeHref("red", "http://example.com/red/");
});

<a class="blue" href="sad1.html">Sad 1</a>
<a class="blue" href="sad2.html">Sad 2</a>
<a class="red" href="angry1.html">Angry 1</a>
<a class="red" href="angry2.html">Angry 2</a>

Answer 2

只是给你一个想法。像这样的：

var links = document.querySelectorAll('a');

for(var i = 0; i < links.length; i++) {
  links[i].href = links[i].className + links[i].pathname;
}

<a class="blue" href="sad1.html">Sad 1</a>
<a class="blue" href="sad2.html">Sad 2</a>
<a class="red" href="angry1.html">Angry 1</a>
<a class="red" href="angry2.html">Angry 2</a>

更新重读问题后，第一次没怎么注意到这行..

我想将一个基本 href 附加到所有带有蓝色类的链接，并且 为所有带有红色类的链接使用不同的基本 href。

要坚持这个想法，它仍然很简单

var links = {};

links.blue = document.querySelectorAll('a.blue');
links.blue.myPath = '/custom/blue/path';

links.red = document.querySelectorAll('a.red');
links.red.myPath = '/custom/red/path';

for (var key in links) {
  for(var i = 0; i < links[key].length; i++) {
    links[key][i].href = links[key].myPath + links[key][i].pathname;
  }
}

<a class="blue" href="sad1.html">Sad 1</a>
<a class="blue" href="sad2.html">Sad 2</a>
<a class="red" href="angry1.html">Angry 1</a>
<a class="red" href="angry2.html">Angry 2</a>

Answer 3

这里的另一个答案为此提供了 core-js 解决方案。

如果您乐于使用 jQuery，jQuery 将为您提供最简洁的解决方案。

如果您不熟悉 jQuery，但愿意使用它，可以在 here 找到快速入门指南

这是一个在 jQuery 中解决此问题的示例。该解决方案的优雅之处在于，您只需将键值对添加到 classToPrefixMap 即可对其进行扩展：

var classToPrefixMap = {
    green: '/path/to/green/',
    blue: '/path/to/blue/'
};

for(var key in classToPrefixMap) {
    $('.' + key).each(function(index, anchor) {
	$(anchor).attr('href', classToPrefixMap[key] + $(anchor).attr('href'));
    })
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<a class="green" href="one.jpg">One</a>
<a class="green" href="two.jpg">Two</a>
<a class="blue" href="three.jpg">Three</a>
<a class="blue" href="four.jpg">Four</a>