叠加弹出框 - 获取内容

Question

我在HTML页面中创建了叠加内容，如下所示：

<!--OVERLAY POPUP-->
        <div class="overlay">
            <div class="content">
                <img class="logo" src="img/logo.jpg" alt="logo" />
                <h1>Title</h1>
                <p>The name of this sweet is: </p>
                <button class="closebtn">Close</button>
            </div>
        </div>

使用JQuery我检索并解析XML文件，该文件更新HTML页面上显示的信息，并将其放入列表中。我还添加了代码以使该功能的点击工作：

<script type="text/javascript">
    $(document).ready(function(){
        $.ajax({
            type: "GET",
            url: "uploads/data.xml",
            dataType: "xml",
            error: function() {
                $('#message').text('Please upload the XML file.');
            },
            success: xmlParser
        });
    });

    function xmlParser(xml){
        $(xml).find("vendor-one").each(function(){
            $("#vendor-one").append('<li class="sweet">' + $(this).find("name").text() + '</li>');
            $(".sweet").fadeIn();
        });
/*
                Enable the overlay to display. Code used from:
                http://hallofhavoc.com/2013/05/how-to-create-an-overlay-popup-box-using-html-css-and-jquery/
            */
            $('.show-popup').click(function(event){
                event.preventDefault(); // disable normal link function so that it doesn't refresh the page
                var docHeight = $(document).height(); //grab the height of the page
                var scrollTop = $(window).scrollTop(); //grab the px value from the top of the page to where you're scrolling
                $('.overlay').show().css({'height' : docHeight}); //display your popup and set height to the page height
                $('.overlay').css({'top': scrollTop+20+'px'}); //set the content 20px from the window top
            });

            // hide popup when user clicks on close button
            $('.closebtn').click(function(){
                $('.overlay').hide(); // hide the overlay
            });

            // hides the popup if user clicks anywhere outside the container
            $('.overlay').click(function(){
                $('.overlay').hide();
            })

            // prevents the overlay from closing if user clicks inside the popup overlay
            $('.content').click(function(){
                return false;
            });
    }
</script>

出于测试目的，甜蜜的名字可以是：

• A
• 乙
• C

我希望能够单独点击每个列表项并具有唯一的叠加显示。

叠加层显示正确但是，我现在需要找到一种方法来更新叠加层中的文字以显示：

'The name of the sweet is: ' + NAMEOFSWEET + ' Get it now.'

我该怎么做？