Question

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

我目前的代码只使用＆＃34; onclick＆＃34;对于每个区，然后调用函数来更改iframe的源。

我想知道我是否可以简化这段代码，可能是通过使用循环？如果我还有15个区可以添加到页面中，我是否需要添加另一个＆＃34; onclick＆＃34;和每个的另一个功能？或者是否有一种我更容易丢失的方式？

简化的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;

   }

});

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

1 个答案: