Question

Html文件：

<html>
<head>
    <style>
    .messboxcontent { display:none; background: rgba(0,0,0,.4); width: 400px; height: 100px; margin: 50px auto; padding: 15px;}
    #mess_test {display: inline-block; cursor: pointer ; vertical-align: middle; width:165px; height:35px; background:blue; bottom:0px; left:144px; margin-right: 16px}
    #msg_holder {overflow-x:scroll ;overflow-y: hidden; white-space: nowrap; position:fixed;height:110px; width:100%; background-color:yellow; bottom:0px;}
    </style>
    <script type="text/javascript" src="jquery.js" ></script>
    <script>
    $(document).ready( function() {
        done();
    });
    function done() {
        setTimeout( function() { 
            update();       
            done();
        }, 2000);
    } 
    function update() {
        $.getJSON("fetch.php", function(data) {   
            $.each(data.result, function(){    
                var message = this['message'];
                var name =  this['name'];
                var age = this['age'];

                $("#msg_holder").append("<div id='mess_test'>"  + name +   "<div>");
                $(document).on("click","#mess_test",function(event) {         
                    $('div.messboxcontent').html(' name : ' + $(this).html() + ' Message : ' + $(this).html() + ' age ; ' + $(this).html() );
                    $('div.messboxcontent').fadeIn();
                    return false;
                });
            });
        });
    };
    </script>
</head>
<body>
    <div class="messboxcontent"></div>
    <div id="msg_holder"></div>

</body>
</html>

fetch.php：

{"result":[{"message":"message-7iii","name":"name-maja", "age":"33"},
{"message":"message_gggggg","name":"name-koka","age":"44"}]}

我正在搜索如何从数据库中检索通知数周。我找到了这种方法。

用户只接收发件人的用户名作为通知框接收所有邮件。他点击了该通知框。

另一个名称，年龄和消息的方框淡入。

但是，我无法传递这些树变量（名称，年龄，消息）。例如，当我收到2条消息时，会出现两个通知框，每个通知框都有一个发件人名称。因此，当我点击第一个通知框（其中包含卡卡作为名称）时，另一个包含名称的框：卡卡，他的年龄和消息出现。当我点击第二个通知框时，我希望该框再次显示发件人姓名，年龄和消息。

使用jquery在html div中显示json数据

0 个答案: