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

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

我当前的代码只是对每个区域使用一个“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>

---

我相信你可以试试这个

 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;

   }

});

---

我相信你可以试试这个

 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;

   }

});