添加一個鏈接到一個在線用戶的div，並刪除在線

Question

現在，每次用戶登錄，該用戶所做的所有帖子都會變綠，而所有離線用戶的帖子都是灰色的。

我想添加一個JavaScript函數的鏈接，當div爲綠色時，以及不同的鏈接爲灰色時。我在PHP中沒有問題，但我希望它能夠實時工作，就像沒有頁面刷新的顏色更改一樣。

的HTML

<div class="main_ads status" id="user'.$user_id.'">post</div> 

status.php

header('Content-Type: application/json'); 
$array = array(); 

$res = mysql_query("SELECT * FROM `users` WHERE `status` = 1"); 
if(mysql_num_rows($res) > 0){ 
    while($row = mysql_fetch_assoc($res)){ 
     $array[] = 'user'.$row['user_id']; // this adds each online user id to the array   
    } 
} 
echo json_encode($array); 

Ajax代碼

$(document).ready(function() {        
     setInterval(function(){ 
      $.ajax({ 
       url: 'status.php', 
       dataType: "json", 
       type: 'GET', 
       success: function(data) { 
        if (data.length > 0){        // if at least 1 is online 
         $('.status').each(function(){     // loop through each of the user posts      
          var userid = $(this).attr('id'); // get the user# 
          if($.inArray(userid, data) !== -1){ // if userid # in the returned data array set to online 
           $(this).css({background: '#40A547'}); 
          } else{          // if not, set to offline 
           $(this).css({background: '#7f8c8d'}); 
          } 
         }); 
        } else {           // if no one is online, set all to offline 
         $('.status').css({background: '#7f8c8d'}); 
        }   
       } 
      }); 
     }, 2000); 
    }); 

我苦思冥想的方式來做到這一點，並認爲分配一個變量與HTML標籤，將在線和離線不同，但不知道如何調用該變量從AJAX代碼到HTML。

所有幫助非常感謝！

Answer 1

您可以利用jQuery的屬性wrapInner()屬性。這可能會附上格中的文本的地方變成<a></a>標記，如：

if($.inArray(userid, data) !== -1){ // if userid # in the returned data array set to online 
    $(this).css({background: '#40A547'}); 
    //for the online users, you could fill in the javascript function 
    $(this).wrapInner('<a href="javascript:void(0);" onclick="javascript:online_clicked();"></a>'); 
} else{          // if not, set to offline 
    $(this).css({background: '#7f8c8d'}); 
    //over here write the link for offline users 
    $(this).wrapInner("<a href='www.google.com'></a>"); 
} 

Fiddle

Answer 2

1. 不要添加內聯樣式，請使用css類。
2. 如果請求花費的時間超過2秒，請中止！
我建議不要使用 id的，mabye data-user或 .user#作爲類

HTML

<div class="main_ads status" id="user1">post1</div> 
... 
<div class="main_ads status" id="user10">post10</div> 

CSS

.online{ 
    background:red; 
    padding:3px; 
} 

JQUERY

var global_ajax_request = null; 
$(document).ready(function() { 
    setInterval(function(){ 
     if (global_ajax_request){ 
      global_ajax_request.abort(); 
     } 
     global_ajax_request = $.ajax({ 
      url: 'ajax.php', 
      dataType: "json", 
      type: 'GET', 
      success: function(data) { 
       $('.status').removeClass('online'); 
       for(var i in data){ 
        $('#'+data[i]).addClass('online'); 
       } 
      } 
     }); 
    }, 2000); 
}); 
$('.status').on('click',function(e){ 
    e.preventDefault(); 
    if ($(this).hasClass('online')){ 
     alert('function for ONLINE'); 
    }else{ 
     alert('function for OFFLINE'); 
    } 
}); 

說明：

global_ajax_request保持參考的請求。在發射一個新的之前，殺死舊的。 （！）這將使瀏覽器不聽響應，但服務器將繼續工作。

每次獲得回覆時，請清除online類，並將其僅添加到返回的userId's中。 （這應該被優化。）

最後一位$('.status').on(...)將在每次有人點擊div時觸發。然後在裏面看看它是否是綠色的（在線）並啓動相應的功能。