消除多次列出href的冗余
如何消除多次列出href属性所产生的冗余? (唯一改变的是URL中的id名称/值对)HTML是:消除多次列出href的冗余
<!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>
在此先感谢!
使用html
的当前方法比编写javascript
来实现相同的结果相对简单。考虑到每个<a>
元素具有不同的.innerHTML
,使用javascript
来渲染相同的html
将需要在document
内写入更多的文本,否定了减少冗余的目标。
在javascript
可以创建多维具有值阵列,以设定在href
和.innerHTML
为每个动态创建<a>
元件,使用Array.prototype.forEach()
迭代阵列,元件的设置属性,附加元素document
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);
});
我明白了,谢谢!这只是我有几个(十二二)链接添加,并认为它是越来越多... – Michael
你可以存储查询字符串参数和'.innerHTML'设置在一个多维数组,迭代数组,创建数组的每个元素的''元素,然后调用'.appendChild()'将动态创建的''元素附加到'document'。 – guest271314
@Michael查看更新后的帖子。 – guest271314
如果这些是真正的只有链接在页面上可以使用<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>
...
请记住,如果有其他相对URL的网页上使用,他们将通过基本元素被打乱。
听起来不粗鲁,但我没有看到任何错误 - 这些链接到不同的页面,因此是分开的。任何使用JS的尝试都会使事情复杂化和混淆。 – Scott
_“(唯一改变的是URL中的id名称/值对)”_注意,每个“”元素的'.innerHTML'也是不同的。 – guest271314