使用SignalR和jquery更改跨度上的css

我正在使用SignalR更新基於實時源更改顏色的跨度。連接工作正常，但我在跨度上的css類的更新部分有一些麻煩。使用SignalR和jquery更改跨度上的css

問題是，當我需要更新一個元素上的幾個類時，類名只是附加的而不會改變。這裏是我的標記：

<span id="[email protected]" class="badge sl-badge-normal connection-false"> 
    <i id="[email protected]" class="fa fa-rss"></i> 
    <span id="[email protected]"> 
     @Model.ActivityMessage  
    </span> 
</span>

在外跨度類sl-badge-normal和connection-false是需要改變的類。 sl-badge-normal可以是以下值：

SL-徽章OK
SL-徽章預警
SL-徽章錯誤
SL-徽章正常

和connection-false只能在連接和連接之間切換。

你問之前，是的，這兩個需要被因爲它是完全不同的信息分爲兩個不同的jQuery的更新:) 我的jQuery看起來像這樣的連接部分：

messageHub.client.notifyAlive = function (aliveMessage, unitId) { 
    if (aliveMessage) { 
     $('#activity-' + unitId).addClass("connection-true"); 
    } else { 
     $('#activity-' + unitId).addClass("connection-false"); 
    } 
};

而爲徽章的一部分，它看起來是這樣的：

messageHub.client.notifyActivityStatus = function(statusColor, statusText, unitId) { 
    $('#activity-' + unitId).addClass("badge " + statusColor); 
    $('#activityMessage-' + unitId).text(statusText); 
};

我的問題在這裏是說下面的語句將從此進入：

<span id="[email protected]" class="badge sl-badge-normal connection-false">

這樣：

<span id="[email protected]" class="badge sl-badge-normal connection-false sl-badge-error connection-true">

任何人都可以請提出一個解決方案？每次有更新時發佈整個類字符串necrseary，還是我可以簡單地交換單個類名？

來源

2014-01-07 Nicklas Pouey-Winger

不要使用互斥的CSS類。如果'connection-false'是基本狀態，那麼完全刪除該類。添加'connection-true'來表示從基本狀態改變。刪除'connection-true'指示返回到基本狀態。 – Tomalak

你在這裏混合了很多技術。你有沒有考慮過淘汰賽？

這裏是一個簡短的例子如何做到這一點：

<!DOCTYPE html> 
<html> 
<head> 
<style> 
    .badge { border-width: 3px; } 

    .sl-badge-normal { border-color: black; } 
    .sl-badge-ok { border-color: green; } 
    .sl-badge-warning { border-color: yellow; } 
    .sl-badge-error { border-color: red; } 

    .connection-true { border-style: solid; } 
    .connection-false { border-style: dashed; } 
</style> 
</head> 
<body> 
<span class="badge" data-bind="css: badgeClass"> 
    <i class="fa fa-rss"></i> 
    <span data-bind="text: activityMessage"></span> 
</span> 

<button data-bind="click: toggleConnection">connection</button> 
<button data-bind="click: toggleStatus">status</button> 

<script src="http://cdnjs.cloudflare.com/ajax/libs/jquery/2.0.3/jquery.min.js"></script> 
<script src="http://cdnjs.cloudflare.com/ajax/libs/knockout/3.0.0/knockout-min.js"></script> 

<script> 
    var ViewModel = function(){ 
    var self = this; 
    self.connected = ko.observable(true); 
    self.status = ko.observable(0); 
    self.activityMessage = ko.observable('activity message'); 

    self.onlineClass = ko.computed(function(){ 
     return self.connected() ? 'connection-true' : 'connection-false'; 
    }); 

    self.statusClass = ko.computed(function(){ 
     var statusClasses = ['sl-badge-normal','sl-badge-ok','sl-badge-warning','sl-badge-error']; 

     return statusClasses[self.status()]; 
    }); 

    self.badgeClass = ko.computed(function(){ 
     return self.onlineClass() + ' ' + self.statusClass(); 
    }); 

    // test ...  

    self.toggleConnection = function(){ 
     self.connected(!self.connected()); 
    }; 

    self.toggleStatus = function(){ 
     self.status((self.status() + 1) % 4); 
    }; 
}; 

$(function(){ 
    ko.applyBindings(new ViewModel()); 
}); 
</script> 

</body> 
</html>

來源

2014-01-07 11:06:09

你可以使用toggleClass去除/添加一個基於布爾類的類。

messageHub.client.notifyAlive = function (aliveMessage, unitId) { 
     $('#activity-' + unitId).toggleClass("connection-true",aliveMessage).toggleClass("connection-false", !aliveMessage);

};

來源

2014-01-07 10:38:12 CodeToad

使用SignalR和jquery更改跨度上的css

回答

相關問題