Question

我无法解决这个问题。 tl; dr我希望能够将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动态设置的。所以我有两个问题 - 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;等）。

考虑到我想要实现的目标，是否有更正确的方法来解决这个问题？我想是的..

Answer 1

好像你说你正试图将一个班级作为当前用户的名字。

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

使用名为“current_user”的类分配list元素可能就足够了，然后使用单独的CSS来控制名为“current_user”的类的任何内容。

这是一个example 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”类的head部分添加了CSS。

这是一个link to the working example，可以同时使用不同的用户名查看不同的网络浏览器。

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>

Answer 2

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

由于消息是由服务器处理的，因此您可以通过判断来自current_user的消息，轻松地在服务器端添加message.klass的新属性。如果是，则该课程可能为current，其他为空白或others。

然后，在JS中

$('li').addClass('<%= message.klass %>')

使用current_user设置CSS类

2 个答案: