javascript - 用 Javascript 替换 iframe 源 - 我可以使用循环吗？

Question

我在页面上有一个项目(区域)列表，并在同一页面上有一个拉入 map 的 iframe。当用户单击其中一个地区时，JavaScript 会更改 iframe 的源以显示用户单击的地区的 map 。

我当前的代码只是对每个区使用一个“onclick”，然后调用一个函数来更改 iframe 的源。

我想知道是否可以通过使用循环来简化这段代码？如果我还有 15 个地区要添加到页面，我是否需要为每个地区添加另一个“onclick”和另一个函数？还是我缺少更简单的方法？

简化的 HTML:

<div id="districtlist">
  <a href="#">Allen</a>
  <a href="#">Barren</a>
  <a href="#">Butler</a>
  <!--about 15 more links to follow-->
</div>

<iframe id="maparea" src="http://www.reddit.com"></iframe>

Javascript:

var a = document.getElementById("districtlist")

a.getElementsByTagName("a")[0].onclick = Allen;
a.getElementsByTagName("a")[1].onclick = Barren;
a.getElementsByTagName("a")[1].onclick = Butler;
//more lines...


function Allen() {
document.getElementById("maparea").src="http://www.youtube.com";
}

function Barren() {
document.getElementById("maparea").src="http://www.mentalfloss.com";
}

function Butler() {
document.getElementById("maparea").src="http://www.amazon.com";
}

//more functions...

Answer 1

我相信你可以尝试这个

 var elems = document.getElementById("districtlist").querySelectorAll('a');

 [].forEach.call(elems, function(elem) {

    elem.onclick = function() {

     var url = '';

     switch(elem.innerText) {
       case 'Allen':
         url = "http://www.mentalfloss.com";
         break;
       case 'Barren':
         url = "http://www.mentalfloss.com"
         break;
       case 'Butler':
         url = "http://www.amazon.com";
         break;
     }

     document.getElementById("maparea").src=url;

   }

});