Iframe onClick неожиданное поведение

Question

У меня есть этот скрипт для загрузки iframes 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/

Надеется, что это помогает.