Question

我正在创建一个页面，当用户单击一个按钮时，某些样式会发生变化，但是该页面应该在第一个选择的按钮上加载。

我使此代码在加载时运行并应用第一类：

$(function() {$('button.volt:first').addClass('voltActive');});

这将更改所应用的类：

changeClass: function () {
   $("button.volt").removeClass('voltActive');
   $("button.volt").toggleClass('voltActive');
}

那是我的CSS：

.volt{
  font-size: 20px;
  border-color: #333;
  border-radius: 10px;
  border-style: dotted;
  margin-left: 25px;
  height: 55px;
  width: 135px;
  background-color: transparent;
}

.voltActive{
 border-color: blue;
 border-style: solid;
 outline: none;
}

那是我的按钮：

<button data-bind="click:$parents[1].changeClass()" class="volt"></button>

但是不起作用。有人可以帮我吗？

Answer 1

toggleClass()更改类的状态。如果它已经在控件上，它将删除它；如果它不在控件上，它将添加它。因此，您要删除它，然后调用toggleClass再次添加它。

只需切换它即可。

changeClass: function () {
          $("button.volt").toggleClass('voltActive');
}

如何基于按钮单击更改页面样式

1 个答案: