在淘汰赛中更改 css 类.js单击鼠标

Changing css class in knockout.js on mouse click

本文关键字：js 单击 鼠标 css 淘汰赛      更新时间：2023-09-26

挖空.js文档显示了像这样的 css 绑定：

<div data-bind="css: { profitWarning: currentProfit() < 0 }">   
    Profit Information
</div>

我需要调整它以在鼠标单击时更改 css 类。我该怎么做？

根据下面的答案，我正在使用这样的代码：

// CSS class to be applied
<style>
    .bigclass
    {
        width: 200px;
    }
</style>
// Select list inside a jquery .tmpl
<script id='criteriaRowTemplate' type='text/html'>
    <tr>
        <td>
            <select data-bind='click: makeBig, css: {bigclass : SelectHasFocus() > 0}' />
        </td>
    </tr>
</script> 
// Knockout.js Viewmodel
var CriteriaLine = function() {
    this.SearchCriterion = ko.observable();
    this.SelectHasFocus = ko.observable(0);
    // this method is called
    makeBig = function(element) { 
        this.SelectHasFocus(1);            
    };        
};

但是，这不会扩展选择列表的宽度。我做错了什么？

让你的点击函数改变一个可观察的变量。 例如：

<div data-bind="css: { myclass: newClass() == true }">
   Profit Information
</div>
<button data-bind="click: changeClass">Change Class</button>
<script type="text/javascript">
    var viewModel = {
        newClass: ko.observable(false),
        changeClass: function() {
            viewModel.newClass(true);
        }
    }; 
</script>

注： 您可以在同一元素上组合click和css。 例如：

<div databind="click: changeClass, css: { myclass: newClass() == true }"></div>

我觉得问题出在脚本标签上。

请在以下链接中找到解决方案：http://jsfiddle.net/ZmU6g/3/

最简单的方法是使用单击绑定来更改回调中的可观察量。您将使用 attr 绑定之类的东西适当地绑定类

相关文章：