jQuery 팝업 div에 정보를 표시합니다.

Question

클릭하면 여러 정보가있는 팝업 div가 표시되는 페이지가 있습니다. 팝업이 작동하고 실제로 정보가 표시되지만 클릭 한 영역과 관련이없는 모든 클릭 가능 영역에 대한 정보입니다. 제 질문은, 클릭 한 영역에 대한 특정 정보를 보여주기 위해 팝업을 얻는 방법은 무엇입니까?

HTML

$(document).ready(function(){ 
    $('#wrapper').append('<div id="mask"></div>'); 
    $('#wrapper').append('<div id="popup"><p class="close">X</p></div>'); 
    $('.example').append('<p>Click here to read about my experience<p>'); 
    $('#content').find('.description').each(function(){ 
    var text = $(this).find('p').text(); 
    $('#popup').append(text); 
    }) 

    $('.example p').on('click', function(){ 
    $('#popup, #mask').show(); 
    }) 

    $('.close, #mask').click(function(){ 
    $('#popup, #mask').hide(); 
    }) 
}) 

여기 시각적 참조를 위해 내 펜의

<div id="wrapper"> 
    <div id="content"> 
    <div class="example"><img src="images/army.jpg" /><div class="description"><p>Active Duty</p></div></div> 
    <div class="example"><img src="images/reserve.jpg" /><div class="description"><p>Reserves</p></div></div> 
    <div class="example"><img src="images/gsu.png" /><div class="description"><p>Georgia Southern</p></div></div> 
    <div class="example"><img src="images/twc.png" /><div class="description"><p>The Weather Chanel</p></div></div> 
    <div class="example"><img src="images/fsi.jpg" /><div class="description"><p>FlightSafety International</p></div></div> 
    <div class="example"><img src="images/freelance.jpg" /><div class="description"><p>Freelance</p></div></div> 
    </div> 
</div> 

JAVASCRIPT. http://codepen.io/RobbyT15/pen/dCiIE

Answer 1

삭제이 라인 :

이

$('#content').find('.description').each(function(){ 
    var text = $(this).find('p').text(); 
    $('#popup').append(text); 
}); 

는 그런 다음 변경을 클릭합니다 :

$('.example p').on('click', function(){ 
    $('#popup').text($(this).prev('.description').text()); 
    $('#popup, #mask').show(); 
}) 

을 그리고 단 하나의 팝업 거기 때문에이

Answer 2

작동합니다, 당신은 내용을 추가해야합니다 해당 특정 <p> 요소를 클릭 할 때만 시도 :

$('.example p').on('click', function(){ 
    var text = $(this).prev('.description').find('p').text(); 
    $('#popup').html(text); 
    $('#popup, #mask').show(); 
}) 

http://codepen.io/anon/pen/herCJ