0

我很难找到解决这个问题的方法。tl;博士我希望能够将 li 的 css 类设置为发布聊天的 current_user 的名称。然后基于该类，我将应用不同的样式。

这是一个聊天窗口，我希望所有当前用户的消息都显示在一侧，我希望所有其他消息以不同的颜色显示在另一侧，等等。

我有一个file.js.coffee基本上读入一些用户输入并将其附加到有序列表并在此过程中添加一些元素和类

      projectRef.on "child_added", (snapshot) ->
        message = snapshot.val()
        $("<li class='self'>").append($("<div class='message'>").append($("<p>").text(message.text))).prepend($("<b/>").text(message.name + ": ")).appendTo $("#messagesDiv")
        $("#messagesDiv")[0].scrollTop = $("#messagesDiv")[0].scrollHeight

      $("#messageInput").keypress (e) ->
        if e.keyCode is 13
          text = $("#messageInput").val()
          projectRef.push 
            name: userName
            text: text
          $("#messageInput").val ""

以上将在浏览器中产生类似的东西

<li class="self">
 <b>User : </b>
  <div class="message">
   <p>My chatt message from file.js.coffee!!</p>
  </div>
</li>

li 中的“self”类是我一直试图根据 current_user 动态设置的。所以我有 2 个问题 - 1. 我试图找出谁发布了 li 和 2. 我试图根据聊天/发布它的用户动态设置该 li 的类。

我的想法是在 file.js.coffee 中使用 JQuery 来获取该 li 并将其添加<%= current_user.name %>为一个类，然后我可以有一个 file.js.erb 我会在其中执行类似的操作

<% unless $('li').hasClass('<%= current_user.name %>'); %>
    <%= $('li').toggleClass('others') %>
<% end %>

这样，它会检查目标的类li是否来自当前用户，如果不将其切换到其他用户，是否将 css 类保持为 self。然后我可以适当地设置类的样式（左、右background-color:blue;等）。

鉴于我要完成的工作，是否有更正确的方法来解决这个问题？我认同..

4

2 回答 2

1

您似乎是在说您正在尝试将一个类分配为当前用户的名称。

我想知道是否有必要走那么远。

为列表元素分配一个名为“current_user”的类可能就足够了，然后有单独的 CSS 来控制任何名为“current_user”的类。

这是一个示例 fiddle。

CSS

li {
    list-style:none;
    clear:both;

    float:right;
    text-align:right;
    background-color:#A7A2A0;
    border:1px solid #EEE;
    width:200px;
    margin:10px;
    padding:5px;
}
li.current_user {
    float:left;
    text-align:left;
    background-color:#24887F;
}

HTML

<li class="current_user">
    <b>Current User:</b>
    <div class="message">
    <p>My message!</p>
    </div>
</li>
<li>
    <b>All Other Users:</b>
    <div class="message">
    <p>Other person's smessage.</p>
    </div>
</li>

更新： 查看firebase示例，如果用户名与编写消息的用户名匹配，我将其更改为添加一个类“current_user”。下面是我在“displayChatMessage”函数中修改的部分代码，我还在“current_user”类的头部添加了 CSS。

这是工作示例的链接，在不同的网络浏览器中同时使用不同的用户名查看。

function displayChatMessage(name, text) {
  if(name == $('#nameInput').val()){
    $('<div/>').text(text).prepend($('<em/>').text(name+': ')).appendTo($('#messagesDiv')).addClass('current_user');
    $('#messagesDiv')[0].scrollTop = $('#messagesDiv')[0].scrollHeight;
  }
  else{
    $('<div/>').text(text).prepend($('<em/>').text(name+': ')).appendTo($('#messagesDiv'));
    $('#messagesDiv')[0].scrollTop = $('#messagesDiv')[0].scrollHeight;
  }
};

这是我添加到头部的 CSS。

<style type="text/css">
  .current_user {
    background-color:#24887F;
  }
</style>
于 2013-07-14T06:38:21.510 回答
0

有许多用户同时使用该应用程序。但是对于每个用户，会话中只有一个 current_user。不要混淆它。

由于消息是由服务器处理的，你可以message.klass通过判断消息来自current_user，很容易的在服务器端添加一个新的属性。如果是，则该类可能是current，否则为空白或others。

然后，在 JS

$('li').addClass('<%= message.klass %>')
于 2013-07-14T06:18:04.763 回答