Javascript 在jQuery弹出式div中显示信息

我有一个页面，有多个区域，当点击时，将显示一个弹出div，其中包含信息。弹出窗口工作，并实际显示内部信息，但是，它是所有可点击区域的信息，而不是特定于点击区域的信息。我的问题是，如何让弹出窗口显示所单击区域的特定信息

HTML

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

$（文档）.ready（函数（）{
$（'#包装器'）。附加（''）；
$（“#包装器”）.append（“
X
”）；
$（'.example'）.append（'单击此处阅读我的经验）；
$（'#content'）。查找（'.description'）。每个（函数（）{
var text=$（this.find（'p'）.text（）；
$（'#弹出框'）。追加（文本）；
})
$（'.example p'）。在（'click'，function（）上{
$（“#弹出，#掩码”）.show（）；
})
$（'.close，#mask'）。单击（函数（）{
$（“#弹出，#掩码”）.hide（）；
})
})

这是我的笔，供参考

删除这些行：

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

---

它应该可以工作，因为只有一个弹出窗口，您只需要在单击特定的

元素时添加内容。尝试：

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