Question

https://www.w3schools.com/code/tryit.asp?filename=FG1ZE0NJ4ZX7

所以，我做了一个进度痕迹，但是我想通过使用knockout.js css-binding来点击每个进度的背景颜色。

如何应用

.selected {
    color: white;
    background: #369F00;
}

单击按钮时的

样式，并在使用knockout.js css-binding单击其他按钮时将其更改回原始颜色？

提前致谢

Answer 1

你可以尝试这样的事情。如果你需要完全控制Javascript中的样式，它会很好用，否则我建议将这些样式放到一个类中，然后使用css绑定，在observable boolean为true时应用一个类。

http://knockoutjs.com/documentation/style-binding.html

＆＃13;

var ViewModel = function() {
    this.styling = ko.observable({
    	'color': 'black',
    	'background': 'white'
    });
    
    this.changeStyles = function(){
        this.styling({
        	'color': 'white',
        	'background': '#369F00'
        });
    };
};
 
ko.applyBindings(new ViewModel());

＆＃13;

body { font-family: arial; font-size: 14px; }
.liveExample { padding: 1em; border: 1px solid #CCC; max-width: 655px; }

＆＃13;

<script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.4.2/knockout-min.js"></script>
<div class='liveExample' data-bind='click: changeStyles, style:styling'>
  Some Content
</div>

＆＃13;

Answer 2

这是如何使用css数据绑定解决问题，保持良好和有序。

http://knockoutjs.com/documentation/css-binding.html

＆＃13;

var ViewModel = function() {
    this.isSelected = ko.observable(false);

    this.changeStyles = function(){
        this.isSelected(true);
    }
};

ko.applyBindings(new ViewModel());

＆＃13;

body { font-family: arial; font-size: 14px; }
.liveExample { padding: 1em; border: 1px solid #CCC; max-width: 655px; }
.selected {color: white; background: #369F00}

＆＃13;

<script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.4.2/knockout-min.js"></script>
<div class='liveExample' data-bind='click: changeStyles, css:{selected:isSelected}'>
  Some Content
</div>

＆＃13;

单击元素时，如何使用knockout.js css-binding更改bg-color？

2 个答案: