잘못된 jQuery 대화 상자 선택

this 피들에서 이미지를 클릭하면 jQuery 대화 상자가 표시됩니다. 대화 상자에는 이미지와 관련된 텍스트 (예 : 법률 회사 이미지의 법률 회사 텍스트, 업계 이미지 텍스트 등)가 포함되어야합니다.잘못된 jQuery 대화 상자 선택

문제는 3 개의 이미지를 추가로 클릭하면 방금 클릭 한 이미지의 대화 상자가 아니라 클릭 한 세 개의 이미지 중 마지막 이미지와 관련된 대화 상자가 반환됩니다.

누군가 내가 잘못 알고있는 점을 지적 해주세요.

HTML

<div id="sf"> 

    <a href="dialogcontent/lawfirms.html" title="Law firms" id="sfimage"> 
     <div class="circle hovershadow lawfirms lawfirms-box-shadow">Law firms</div> 
    </a> 
    <a href="dialogcontent/industry.html" title="Industry" id="sfimage"> 
     <div class="circle hovershadow industry industry-box-shadow">Industry</div> 
    </a> 
    <a href="dialogcontent/in-house.html" title="In-house legal counsel" id="sfimage"> 
    <div class="circle hovershadow in-house in-house-box-shadow text">In-house 
      legal counsel</div> 
    </a> 
</div>

자바 스크립트 : 당신은 '하나'를 사용하는

$(document).ready(function() { 
var $loading = $('<img src="http://ubuntuone.com/5qQ3i4ctM8HAvRsSIZKgqd" alt="Loading ..." class="loading">'); 
var $dialog = $('<div></div>') 

$('#sf a').each(function() { 

     $dialog.append($loading.clone()); 
    var $link = $(this).one('click', function() { 
     $dialog.load($link.attr('href') + ' #content') 
      .dialog({ 
      title: $link.attr('title'), 
      width: 500, 
      height: 300 
     }); 

     $link.click(function (e) { 

     // e.preventDefault(); 
      $dialog.dialog('open'); 

      return false; 
     }); 

     return false; 
    }); 
}); 
});

출처

2013-03-23 Clive van Hilten