Jquery 使用knockout切换css类

我正试着这样做。这是有效的语法吗？我正在检查一些标志值并切换b/w两个css类

<div data-bind="visible:'anchorJobContractor'===JobDetail_SelctedTab(), css:IsTabsCollapsed ? TabCollapsed : TabExpanded"></div>

---

第一部分可见数据绑定对我很有用。

你能试着将CSS的逻辑封装在大括号中，如下所示：

<div data-bind="visible:'anchorJobContractor'===JobDetail_SelctedTab(), css: { IsTabsCollapsed ? TabCollapsed : TabExpanded }"></div>

或者，您可以将逻辑移动到javascript中，而不是使用计算值在HTML中执行

viewModel.myCssClass = ko.computed(function() {
    return IsTabsCollapsed ? "TabCollapsed" : "TabExpanded";
}, viewModel);


<div data-bind="visible:'anchorJobContractor'===JobDetail_SelctedTab(), css: myCssClass"></div>

viewModel.myCssClass=ko.computed（函数（）{
返回IsTabsCollapsed？“TabCollapsed”：“TabExpanded”；
}，视图模型）；

如果ISTABScollapped是一个可观察的对象，您必须执行以下操作：

IsTabsCollapsed() ? TabCollapsed : TabExpanded

---

这是css绑定的一种可能语法：

<div data-bind="css: { TabCollapsed: IsTabsCollapsed, TabExpanded: !IsTabsCollapsed() }"></div>

---

另请参阅位于以下位置的文档：

您可以将CSS绑定与这样的计算可观察对象一起使用

<div data-bind="css: TabClass">
   ...
</div>

<script type="text/javascript">
    var viewModel = {
        IsTabsCollapsed: ko.observable(false);
    };
    viewModel.TabClass = ko.computed(function() {
        return this.IsTabsCollapsed() ? "TabCollapsed " : "TabExpanded";
    }, viewModel);
</script>

...
var viewModel={
IsTabsCollapsed:ko.可观察（假）；
};
viewModel.TabClass=ko.computed（函数（）{
返回此.IsTabsCollapsed（）？“TabCollapsed”：“TabExpanded”；
}，视图模型）；

这并不是实现你想要的东西的最小最干净的方法，但它确实很容易管理和修改，并且非常容易理解。

免责声明：快速而肮脏的版本

我需要一种快速而肮脏的方法来将类应用于调试面板，并得出以下结论

我建议此版本仅用于调试，并且仅当您同时使用jQuery时才有效

<div class="debug-only knockout-debug-panel" 
            data-bind="click: function(data, event) { $(event.currentTarget).toggleClass('transparent'); }">

</div>

.transparent { opacity: .5; }

.transparent{不透明度：.5；}

Knockout有一个函数

toggledomnodecsclass

，但不幸的是，它需要一个布尔值来决定是否添加或删除该类