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>

​

Answer 2

1. 因为当您移除类时，您的click事件不会发生。
2. 在锚上添加另一个类，然后在单击事件中使用它。
3. 使用toggleClass()

​

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

.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 anchorclass">Click To Change</a>

​

Answer 3

使用jquery toggleClass()函数，它根据类的存在或状态参数的值，从匹配元素集中的每个元素中使用一个或多个add或remove。您可以找到文档JQuery 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>

​

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