jquery - 添加一个类，然后删除它并添加另一个

Question

所以我想在点击时添加一个类，然后当它被再次点击时，我想将它还原回之前的类。这是如何实现的。我还使用 on() 对其进行了测试，但也没有成功。

$('.red').click(function() {
  $(this).removeClass('red').addClass('blue');
});

$('.blue').click(function() {
  $(this).removeClass('blue').addClass('red');
});

.red {
  color: red;
}

.blue {
  color: blue;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<a href="#" class="red">test click</a>

您可以运行代码 here

如何改回类(class)？它显示在 Dom 中，但不显示在前端。

Answer 1

1. 使用.toggleClass()
2. 因为按钮有动态类，所以使用 .on() 来动态添加元素

$(document).on('click', '.red', function(e) {
  e.preventDefault();
  $(this).toggleClass('red blue');
});

$(document).on('click', '.blue', function(e) {
  e.preventDefault();
  $(this).toggleClass('red blue');
});

.red {
  color: red;
}

.blue {
  color: blue;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<a href="#" class="red">test click</a>