Question

我有一个页面有多个区域，点击后会显示一个包含信息的弹出窗口。弹出窗口工作，并实际显示内部信息，但是，它是所有可点击区域的信息，而不是特定于点击区域。我的问题是，如何让弹出窗口显示所点击区域的具体信息？

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

这是我的笔，用于视觉参考。 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

在jQuery popup div中显示信息

2 个答案: