在jQuery弹出div中显示信息

Question

我有一个有多个区域的页面，当点击这些区域时，会显示一个弹出的div，里面有信息。弹出效果很好，并且实际上显示了内部的信息，但是，它是所有可点击区域的信息，而不是特定于单击区域的信息。我的问题是，如何让弹出窗口显示该区域的特定信息？

<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

$(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();
    })
})

这是我的钢笔，可以作视觉参考。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