根據帖子的作者狀態實時添加指向div的鏈接

Question

我有具有唯一ID的帖子，如果作者登錄或實時注銷（無需刷新），則每個帖子都會變成綠色/灰色。

當帖子為綠色時（其作者在線），我希望其鏈接為用戶定向一個JavaScript函數，該函數將采用帖子ID，標題等。

如果帖子為灰色，則鏈接應將用戶定向到帖子本身，這意味着必須以某種方式獲取帖子的$ id。

我的問題是，如果不是實時的，那么我所有的php變量都已設置並且可以很好地工作，但是如果我想實時運行，如何將這些變量傳遞到ajax代碼中，以便它動態地變化？ 另外，如何使整個div成為鏈接，而不僅僅是div內的文本？

主頁

  $res = mysql_query("SELECT * FROM `posts` ORDER BY `date` DESC LIMIT 10");
        if($res && mysql_num_rows($res) > 0){
            while($row = mysql_fetch_assoc($res)){
                $id = $row['id'];
                $user_id = $row['user_id'];
                $title = $row['title'];
            echo '<div class="status" id="user'.$user_id.'">'.$title.'</div>';
         }
    }

AJAX

    $(document).ready(function() {      
        setInterval(function(){
            $.ajax({
                url: 'status.php', //get online users
                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'}); 
                            $(this).wrapInner("<a href='javascript:void(0)' onclick='chatWith('.$id.')'></a>"); //call function for $id
                        } else{     // if not, set to offline
                            $(this).css({background: '#7f8c8d'});
                            $(this).wrapInner("<a href='post.php?id='></a>"); //take to post itself
                        }
                    });
                } else {    // if no one is online, set all to offline
                    $('.status').css({background: '#7f8c8d'});
                    $(this).wrapInner("<a href='post.php?id='></a>");
                }           
            }
        });
    }, 2000); //just for testing
 });

非常感謝所有幫助！

Answer 1

這就是我要怎么做。

（1）將發布id添加到div ，即 data-postid="$id"

主頁

$res = mysql_query("SELECT * FROM `posts` ORDER BY `date` DESC LIMIT 10");
    if($res && mysql_num_rows($res) > 0){
        while($row = mysql_fetch_assoc($res)){
            $id = $row['id'];
            $user_id = $row['user_id'];
            $title = $row['title'];
        // add the $id to the div - ie. data-postid="$id"
        echo '<div class="status" id="user'.$user_id.'" data-postid='.$id.'" >'.$title.'</div>';
     }
}

（2）在阿賈克斯，而不是使用$(this).wrapInner()我想補充一個online類使用這些在線.addClass()並利用從這些離線刪除.removeClass()

阿賈克斯

$(document).ready(function() {      
    setInterval(function(){
        $.ajax({
            url: 'status.php', //get online users
            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'});
                        $(this).addClass('online'); 
                      } else{     // if not, set to offline
                        $(this).css({background: '#7f8c8d'});
                        $(this).removeClass('online');
                      }
                    });
                   } else {    // if no one is online, set all to offline
                    $('.status').css({background: '#7f8c8d'});
                    $(this).removeClass('online');
                   }           
            }
        });
    }, 2000); //just for testing
});

（3）綁定任何對您的.status div的單擊，獲取帖子ID，獲取帖子是否具有.online類，然后確定鏈接樣式。 （請注意：在setInterval(function(){之后，在$(document).ready(function() { setInterval(function(){

$(document).ready(function() {
setInterval(function(){
 ...
}, 2000);

// Bind to any click on a post div
$('.status').click(function(){

    // get the post id
    var postid = $(this).data('postid');

    // check if post has '.online' class
    if($(this).hasClass('online')){

       // if online
       chatWith(postid);
    }
    else {

       // if offline
       window.location.href = 'post.php?id='+postid;
    }

});

});

這是一個jsFiddle（它使用ID來提醒鏈接/函數）-http: //jsfiddle.net/f5xkZ/5/