加載IFRAME onClick

Question

我有IFRAME加載onClick。

以下腳本的問題是始終加載第一個iframe的內容，而我期望在單擊相對鏈接時加載右側的iframe。

$('.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...) 
... 

如何加載就在iframe的相對鏈接？

Answer 1

請勿使用相同的ID。你可以使用一個類：

<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")); 
});