javascript - 使用 current_user 设置 CSS 类

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 动态设置的。所以我有 2 个问题 - 1. 我试图找出谁发布了 li 和 2. 我正在尝试根据聊天/发布它的用户动态设置该 li 的类。

我的想法与 file.js.coffee 中的内容类似，使用 JQuery 获取该 li 并添加 <%= current_user.name %>作为一个类(class)，那么我可以有一个 file.js.erb 在那里我可以做类似的事情

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

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

考虑到我要完成的任务，是否有更正确的方法来解决这个问题？我也觉得。。

Answer 1

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

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

为列表元素分配名为“current_user”的类可能就足够了，然后使用单独的 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”类的头部部分添加了 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>