Javascript 两次更改类

Question

我编写了以下代码，当您单击链接时，整个样式将会改变。

$(".buybuttons").click(function() {
  $(".buybuttons").removeClass().addClass('buybuttonsclick');
});

.buybuttons {
  background-color:#000000;
  text-align:center;
  padding:10px;
}

.buybuttonsclick {
  background-color:#ff0000;
  text-align:right;
  padding:10px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<a href="#" class="buybuttons">Click To Change</a>

问题是，我怎样才能把它反过来呢？!

我的意思是，当我再次单击时，它会更改为第一种样式(购买按钮)。

Answer 1

toggleClass()怎么样？

$(".buybuttons").click(function() {
  $(this).toggleClass('buybuttonsclick');
});

.buybuttons {
  background-color:#000000;
  text-align:center;
  padding:10px;
}

.buybuttonsclick {
  background-color:#ff0000;
  text-align:right;
  padding:10px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<a href="#" class="buybuttons">Click To Change</a>