jquery - 消息菜单栏左上角显示的消息数

Question

抱歉，如果我没有向您展示完整的代码，因为我不确定如何实现它。我看了一下facebook的消息通知框，如果有新的最近消息，在消息图标的右上角，一个红色的数字会位于那里并覆盖消息框，当你点击这个数字时，它就会消失，新的消息显示给你，我想知道如何实现它，当更多新消息出现时，指示将再次出现多少消息的数字，他们是否使用 ajax 自动刷新 div 来实现？所以假设我有以下消息框:

     <style>
    #messsge{width:100px;height:50px;border: 1px soild #000000;}
    #number{color:#ff0000;position:abosolute; z-index:999;top:-40px;left:-90px;}
    </style>
    <a href="#"><div id="message"></div></a><span id="number">3</span>
  <script>
   $("#message").click(function (e) { 
     e.preventDefault();
     $("#number").hide();
        });
     var auto_refresh = setInterval(function (){
  $('#number').load('number.php').fadeIn("slow");
   }, 1000);//not exactly sure how to refresh the number, I assume probably don't need to retrieve it from another php file.


  </script>

我不确定我是否做了正确的事情，任何人都可以帮助我，非常感谢!

Answer 1

你可以尝试类似的东西

在你的 number.php 中

//get the userid or some id from which you can specify the user from which the request is coming 
//e.g. $id=$_SESSION['CurrentUserID']
//apply some logic to determine if the user has new messages if he has some new msgs
$hasNewMsg="yes";
//calculate the number of messages 
$newMsgs=5;
echo json_encode(new array("hasMsg"=>$hasNewMsg,"newMsgs"=>$newMsgs));

//and if no new msgs
echo json_encode(new array("hasMsg"=>"no"));

客户端

<style>
    #messsge{width:100px;height:50px;border: 1px soild #000000;}
    #number{color:#ff0000;position:abosolute; z-index:999;top:-40px;left:-90px;}
    </style>
    <a href="#"><div id="message"></div></a><span id="number">3</span>

javascript/jquery

$(function(){
$("#message").click(function (e) { 
     e.preventDefault();
     $("#number").hide();
        });

var auto_refresh = setInterval(function (){

$.ajax({
type:"POST",
dataType:"json",
success:function(data){
if(data.hasMsg=="yes"){
$("#number").text(data.newMsgs).fadeIn('slow');
}
else//do nothing    
},
error:function(jxhr){
console.log(jxhr.responseText);
}   
});    
});    
});

免责声明:我不熟悉 php 所以...