需要帮助通过 javascript 和 jquery 修改数据的显示方式

Question

我有下面的代码，我需要一些帮助来修改代码输出。

下面的代码用于 Codeigniter 聊天应用程序，用户在文本框 (#text) 中输入消息并输出消息，消息通过 [=23] 保存在 MySQL 数据库中=] 然后输出到文本框(#received).

我想修改代码以包含消息发件人，并显示发件人和收件人之间有区别的消息，例如 google 聊天或短信线程。数据输出是通过javascript，我还是个新手

这是当前的聊天线程输出。 Current Chat Output. For the full CodeIgniter project code, Click this link。任何帮助或指点将不胜感激。

<script src="//ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>
<script>
    var time = 0;

    var updateTime = function(cb) {
        $.getJSON("index.php/chat/time", function(data) {
            cb(~~data);
        });
    };

    var sendChat = function(message, cb) {
        $.getJSON("index.php/chat/insert_chat?message=" + message, function(data) {
            cb();
        });
    }

    var addDataToReceived = function(arrayOfData) {
        arrayOfData.forEach(function(data) {
            $("#received").val($("#received").val() + "\n" + data[0]);
        });
    }

    var getNewChats = function() {
        $.getJSON("index.php/chat/get_chats?time=" + time, function(data) {
            addDataToReceived(data);
            // reset scroll height
            setTimeout(function() {
                $('#received').scrollTop($('#received')[0].scrollHeight);
            }, 0);
            time = data[data.length - 1][3];
        });
    }

    // using JQUERY's ready method to know when all dom elements are rendered
    $(document).ready(function() {
        // set an on click on the button
        $("form").submit(function(evt) {
            evt.preventDefault();
            var data = $("#text").val();
            $("#text").val('');
            // get the time if clicked via a ajax get query
            sendChat(data, function() {
                alert("dane");
            });
        });
        setInterval(function() {
            getNewChats(0);
        }, 1500);
    });
</script>
<textarea id="received" rows="10" cols="50"></textarea>
<form>
    <input id="text" type="text" name="user">
    <input type="submit" value="Send">
</form>

Answer 1

根据 link 看来不可能按发件人区分邮件。您的应用程序根本不知道谁发送了消息。

因此，首先，您必须在数据库中添加一个字段来存储有关发件人的信息。您很可能必须在应用程序中实施某种身份验证。之后你就可以在客户端进行差异化了。

在客户端，您必须将#received 文本框更改为div 或其他一些块元素。这样做您将能够将 CSS 样式应用于 individual 消息。那么您需要以这种方式更改 addDataToReceived 函数：

var addDataToReceived = function (arrayOfData) {
  arrayOfData.forEach(function (data) {
    var message = $('<div>');
    message.html(data[0]);

    if (data[2] === username) {
        // data[2] is a new element, it points to an author of the message
        //
        // username indentificates a current user
        // you'll save it to a variable after authentication somehow
        message.addClass('self-message');
    } else {
        message.addClass('other-message');
    }

    $("#received").append(message);
  });
}

这在很大程度上取决于具体的实现，但总的来说就是这样。

需要帮助通过 javascript 和 jquery 修改数据的显示方式

Need help Modifying how data is displayed via javascript and jquery

html

javascript

php

jquery

codeigniter-2