javascript - iframe onClick 意外行为

Question

我有这个脚本来加载 iframe onClick，但是当我点击一个链接时，它会同时加载所有框架。

JS

$('.toggle-next-div').click(function(){
var iframe = $('.myiFrame');
iframe.attr("src", iframe.data("src")); 
});

HTML

<a href="#" class="toggle-next-div">Map</a>// iframe (1)
<iframe class="myiFrame" data-src="my-url" src="about:blank"></iframe>  
<a href="#" class="toggle-next-div">Map</a>// iframe (2)
<iframe class="myiFrame" data-src="my-url" src="about:blank"></iframe>
<a href="#" class="toggle-next-div">Map</a>// iframe (3)
<iframe class="myiFrame" data-src="my-url" src="about:blank"></iframe>
<a href="#" class="toggle-next-div">Map</a>// iframe (4)
<iframe class="myiFrame" data-src="my-url" src="about:blank"></iframe>
//...and so on.....

当我点击相关链接时，我希望一次只加载一帧。

怎么做？

Answer 1

尝试这个：

$('.toggle-next-div').click(function () {
    var iframe = $(this).next('.myiFrame');
    iframe.attr("src", iframe.data("src"));
});

JSFiddle：http: //jsfiddle.net/KyleMuir/6XnwC/

希望这可以帮助。