[英]How to dynamic change styles with css and/or javascript
我有一个按钮,单击时需要更改一些样式。 我可能可以通过添加和删除某些类轻松完成此操作,但是我在页面运行时更改了第一个元素,因此现在我需要从第一个元素中删除样式并将其应用于单击的按钮,但实际上我没有得到我怎么能让它成为第n个孩子(1)的原因。 有人可以帮忙吗?
这是我的 html:
<tr>
<!-- ko foreach: optionValues -->
<td>
<input type="radio" id="volt" name="volt"
data-bind="attr: {id: 'CC-prodDetails-' + $data.value}, value: $parent.selectedOption">
<button data-bind="attr: {for: 'CC-prodDetails-' + $data.value}, text:key,
click:function(key){
$parent.selectedOption(key);
$parent.selectedOptionValue(key);
}" class="voltagem"></button>
</td>
<!-- /ko -->
这就是我的 css:
input {
display: none;
}
.voltagem {
font-size: 20px;
border-color: #333;
border-radius: 10px;
border-style: dotted;
margin-left: 25px;
height: 55px;
width: 135px;
background-color: transparent;
}
.voltagem:focus {
border-color: blue;
border-style: solid;
outline: none;
}
td:nth-child(1) .voltagem {
border-color: blue;
border-style: solid;
outline: none;
}
您可以为此使用css
绑定。 如果$parent.selectedOption() === key
则将类voltagem
设置为按钮
const model = function() { const self = this; const options = [ { key: "one" }, { key: "two" }, { key: "three" }]; self.optionValues = ko.observable(options); self.selectedOption = ko.observable(options[0].key); } ko.applyBindings(new model)
.voltagem { color: red }
<script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.4.2/knockout-min.js"></script> <table> <tr> <!-- ko foreach: optionValues --> <td> <button data-bind="text: key, click: function(obj) { $parent.selectedOption(obj.key) }, css: { voltagem: $parent.selectedOption() == key }"> </button> </td> <!-- /ko --> </tr> </table>
注意:您需要将click
绑定功能更改为
function(obj) {
$parent.selectedOption(obj.key)
$parent.selectedOptionValue(obj.key)
}
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.