使用current_user設置CSS類

我遇到了解決此問題的方法時遇到問題。 tl; dr我希望能夠將li的css類設置爲發佈該聊天的current_user的名稱。然後根據這個班級，我將應用不同的風格。使用current_user設置CSS類

這是一個聊天窗口，我希望當前所有的用戶信息，顯示在一邊，我希望所有其他消息顯示在另一側用不同的顏色，等

我有一個file.js.coffee基本上讀取一些用戶輸入，並將其apends到一個有序列表，並增加了沿途的一些元素和類

 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搶禮，並添加<%= current_user.name %>爲一類，然後我可以有一個file.js.erb在那裏我會做這樣的事情

東西線

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

這樣，它檢查類目標li的是從目前的用戶時，如果它是保持CSS類自我，如果不是切換到其他。然後，我可以適當地設置類的樣式（左，右，background-color:blue;等）。

有沒有更正確的方法來解決這個問題給我想要完成的？我認爲這樣..

來源

2013-07-14 computer_smile

好像你說你要指定一個類爲當前用戶的名字。

我想知道如果去那麼遠是必要的。

給名爲「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>

UPDATE： 望着火力的例子，我改變了它添加一個類「CURRENT_USER」如果用戶名相匹配的用戶名那寫了信息。下面是我在「displayChatMessage」功能改變了代碼的一部分，我還添加CSS到頭部的「CURRENT_USER」級。

這裏有一個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>

來源

2013-07-14 06:38:21 Shanosha

也許我完全失去了一些東西，但我與如何識別張貼聊天會已經從CURRENT_USER掙扎。我不認爲@ BillyChan的答案會工作，因爲我寫這封信[火力]（http://firebase.com）服務器，而不是我創建了一個消息模型。仍然困惑：/ –

@Tmacram我看着火力例子，改變它加個班「CURRENT_USER」的，因爲它寫的一條消息在聊天窗口，如果當前用戶的名稱寫郵件的人的名字相匹配。使用不同的用戶名在同一時間使用兩種不同的網絡瀏覽器這個例子。 [鏈接]（https://www.firebase.com/tutorial/play.html#-IzR1yE-r6Pm0xLRWUGn） – Shanosha

@Tmacram我檢查了重火力例子，改變它做的事情，我們正在討論。請參閱我在上面的答案中添加的更新。我已經發布了代碼片段以及該工作示例的鏈接。 – Shanosha

有許多用戶同時使用該應用程序。但是對於每個用戶，會話中只有一個current_user。不要混淆。

由於消息是要由服務器進行處理，可以很容易地通過判斷信息添加的message.klass在服務器側上的新的屬性來自CURRENT_USER。如果是，則該類可能爲current，否則爲空或others。

然後，在JS

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

來源

2013-07-14 06:18:04

使用current_user設置CSS類

回答

相關問題