Блог

У меня есть кнопка, при нажатии на которую мне нужно изменить некоторые стили. Вероятно, я мог бы легко сделать это с помощью некоторого класса add и remove, но я меняю первый элемент при запуске страницы, поэтому теперь мне нужно удалить стили из первого и применить его к нажатой кнопке, но я на самом деле не понял, как я мог бы сделать это причиной 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 привязку. Установите класс voltagem на кнопку, если $parent.selectedOption() === key

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