单击元素时，如何使用挖空.js css 绑定来更改 bg 颜色

Question

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

因此，我制作了一个进度面包屑，但我想在使用 KNOCKOUT .js css 绑定单击时更改每个进度的背景颜色。

如何应用

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

单击按钮时的样式，并使用 Knockout .js CSS 绑定单击其他按钮时将其更改回其原始颜色？

提前致谢

Answer 1

你可以尝试这样的事情。如果您需要从 Javascript 完全控制样式，它效果很好，否则我建议将这些样式放入一个类中，并使用 css 绑定，以便在可观察布尔值为真时应用类。

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

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

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

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

Answer 2

这是如何使用 css 数据绑定解决问题，保持事物的美观和有类。

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

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

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

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