Question

   <html>
<head>
<style>
.messboxcontent { display:none; background: rgba(0,0,0,.4); width: 400px; height: 100px; margin: 50px auto; padding: 15px;}
.mess_name {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();
      }, 20000);
} 
function update() {
     $.getJSON("fetch.php", function(data) {   
       $.each(data.result, function(){    
        var message = this['message'];
        var name =  this['name'];
call(name, message);
 });
});
};
function call(name, message){
$("#msg_holder").append("<div class='mess_name'>"  + name +   "<div>");
$(".mess_test").click( function() {
          $('div.messboxcontent').html(' name :&nbsp;&nbsp; '+ name + '&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;  Message &nbsp;&nbsp;:&nbsp;&nbsp; ' + message);
          $('div.messboxcontent').fadeIn();
   return false;
});
}
</script>
</head>
<body>
<div class="messboxcontent"></div>
<div id="msg_holder"></div>

</doby>
</html>

这是fetch.php文件

   {"result":[{"message":"this is haha","name":"haha"},{"message":"this is koka","name":"koka"}]}

当我点击包含任何名称的蓝色框时，它会显示最新的消息和名称。我想要的是当我点击包含哈哈作为名称的方框时我想要包含消息的方框：这是哈哈，

Answer 1

你需要使用append而不是html。

    $('div.box').append( message );

操纵jquery变量

1 个答案: