Question

如何通过多次列出href属性来消除创建的冗余？（唯一改变的是URL中的id名称/值对）HTML是：

<!DOCTYPE html>
<html>
<body>

<div style="border: 2px solid lightgrey;"><iframe name="map" width="100%" height="700" frameborder="5px" scrolling="no" marginheight="0" marginwidth="0" src="https://peachtreecorners.maps.arcgis.com/apps/webappviewer/index.html?id=3bee"></iframe></div>

<p><a href="https://peachtreecorners.maps.arcgis.com/apps/webappviewer/index.html?id=2c48" target="map">Do I live in Peachtree Corners?</a></p>
<p><a href="https://peachtreecorners.maps.arcgis.com/apps/webappviewer/index.html?id=270c" target="map">Voting Districts</a></p>
<p><a href="https://peachtreecorners.maps.arcgis.com/apps/webappviewer/index.html?id=ba01" target="map">Apartments and Subdivisions</a></p>

</body>
</html>

提前致谢！

Answer 1

使用html的当前方法比编写javascript以获得相同的结果要简单得多。鉴于每个<a>元素具有不同的.innerHTML，使用javascript呈现相同的html将需要在document内写入更多的文本，否定减少冗余的目标。

在javascript，您可以为每个动态创建的href元素创建一个值为.innerHTML和<a>的多维数组，使用Array.prototype.forEach()迭代数组，设置元素的属性，将元素追加到document

＆＃13;

var url = " https://peachtreecorners.maps.arcgis.com/apps/webappviewer/index.html";
var arr = [
  ["2c48d68065b541388e262fb4113773af", "Do I live in Peachtree Corners?"],
  ["270c6dc8c47a45b2941e286004b9da2c", "Voting Districts"],
  ["270c6dc8c47a45b2941e286004b9da2c", "Apartments and Subdivisions"]
];

arr.forEach(function(data) {
  var p = document.createElement("p");
  var a = document.createElement("a");
  a.href = url + "?=" + data[0];
  a.target = "map";
  a.innerHTML = data[1];
  p.appendChild(a);
  document.body.appendChild(p);
});

＆＃13;

Answer 2

如果这些是页面上的唯一链接，则可以使用<base>元素。

此元素位于文档的头部，并且希望如此

<!DOCTYPE html>
<html>
<head>
    <base href="https://peachtreecorners.maps.arcgis.com/apps/webappviewer">
<body>
    <p><a href="/index.html?id=2c48" target="map">Do I live in Peachtree Corners?</a></p>

...

请记住，如果页面上使用了其他相对网址，则它们将被基本元素中断。

消除多次列出href的冗余

2 个答案: