我正在使用 SignalR 更新这个基于实时源改变颜色的跨度。连接工作正常，但我在 span 上的 css 类的更新部分遇到了一些问题。
问题是，当我需要更新一个元素上的多个类时，类名只是附加而不是更改。 这是我的标记:
<span id="activity-@UnitId" class="badge sl-badge-normal connection-false">
<i id="asxConnected-@UnitId" class="fa fa-rss"></i>
<span id="activityMessage-@UnitId">
@Model.ActivityMessage
</span>
</span>
在外部跨度中，类 sl-badge-normal 和 connection-false 是需要更改的类。
sl-badge-normal 可以是以下值:
- sl-badge-ok
- sl-徽章警告
- sl-徽章错误
- sl-徽章-普通
connection-false 只能在 connection-true 和 connection-true 之间变化。
在你问之前，是的，这两个需要分成两个不同的 jquery-updates 因为它是完全不同的消息:) 对于连接部分，我的 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="activity-@UnitId" class="badge sl-badge-normal connection-false">
为此:
<span id="activity-@UnitId" class="badge sl-badge-normal connection-false sl-badge-error connection-true">
有人可以为此提出解决方案吗？每次有更新时是否都需要发布整个类字符串，或者我可以简单地交换单个类名吗？
最佳答案
您在这里混合了很多技术。你有没有考虑过像淘汰赛这样的事情？
这是一个简短的例子:
<!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>
关于jquery - 使用 SignalR 和 jquery 更改 span 上的 css，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/20968289/