Charger IFRAME onClick

Question

J'ai IFRAMEs loading onClick.

Le problème avec le script suivant est qu'il charge toujours le contenu du premier iframe, alors que je m'attends à charger juste le bon iframe quand je clique sur le lien relatif.

$('.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 id="myiFrame" data-src="my-url" src="about:blank"></iframe 
<a href="#" class="toggle-next-div">Map</a>// iframe (2) 
<iframe id="myiFrame" data-src="my-url" src="about:blank"></iframe> 
<a href="#" class="toggle-next-div">Map</a>// iframe (3) 
<iframe id="myiFrame" data-src="my-url" src="about:blank"></iframe 
<a href="#" class="toggle-next-div">Map</a>// iframe (and so on...) 
... 

Comment charger juste le iframe pour le lien relatif?

Answer 1

N'utilisez pas le même ID. Vous pouvez utiliser une classe:

<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> 

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