使用SignalR和jquery更改跨距上的css_Jquery_Html_Css_Razor_Signalr

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

jquery html css razor signalr

使用SignalR和jquery更改跨距上的css,jquery,html,css,razor,signalr,Jquery,Html,Css,Razor,Signalr,我正在使用信号器来更新这个跨度，它根据实时源改变颜色。连接工作正常，但是我在span上的css类的更新部分遇到了一些问题问题是，当我需要在一个元素上更新几个类时，类名只会被追加，而不会被更改。以下是我的标记： <span id="activity-@UnitId" class="badge sl-badge-normal connection-false"> <i id="asxConnected-@UnitId" class="fa fa-rss"><

我正在使用信号器来更新这个跨度，它根据实时源改变颜色。连接工作正常，但是我在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>

对于徽章部分，它看起来像这样：

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">

有谁能提出解决方案吗？每次更新时是否需要发布整个类字符串，或者我可以简单地交换单个类名？

您可以使用toggleClass删除/添加基于布尔值的类

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

})

您在这里混合了许多技术。你有没有考虑过类似击倒的事情

下面是一个简短的示例：

<!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>


.badge{边框宽度：3px；}
.sl徽标正常{边框颜色：黑色；}
.sl徽章ok{边框颜色：绿色；}
.sl徽章警告{边框颜色：黄色；}
.sl标记错误{边框颜色：红色；}
.connection true{边框样式：实心；}
.connection false{边框样式：虚线；}
连接
地位
var ViewModel=函数（）{
var self=这个；
自连接=可观察（真）；
自我状态=可观察的ko（0）；
self.activityMessage=ko.observable（“活动消息”）；
self.onlineClass=ko.computed（函数（）{
返回self.connected（）？'connection true'：'connection false'；
});
self.statusClass=ko.computed（函数（）{
var statusClasses=['sl-badge-normal'、'sl-badge-ok'、'sl-badge-warning'、'sl-badge-error']；
返回statusClasses[self.status（）]；
});
self.badgeClass=ko.computed（函数（）{
返回self.onlineClass（）+“”+self.statusClass（）；
});
//测试。。。
self.toggleConnection=函数（）{
self.connected（！self.connected（））；
};
self.toggleStatus=函数（）{
自我状态（（自我状态（）+1）%4）；
};
};
$（函数（）{
应用绑定（新的ViewModel（））；
});

不要使用互斥的CSS类。如果

connectionfalse

是基本状态，只需完全删除该类。添加

connection true

以指示与基本状态的更改。删除

连接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>