jQuery toggle bootstrap类

Question

我想通过切换班级来切换我的按钮

<button type="button" class="btn btn-success btn-sm btn-edit">
    <span class="glyphicon glyphicon-edit"></span> // default class is glyphicon edit
</button>

JS：

$('.btn-edit').click(function() {
    $(this).children().removeClass('glyphicon-edit').addClass('glyphicon-ok');
});    

但是当我再次点击时，glyphicon-edit类

上没有回来

Answer 1

您可以使用 toggleClass() 来切换课程。

  

描述：在匹配元素集中的每个元素中添加或删除一个或多个类，具体取决于类的存在或状态参数的值（取自http://api.jquery.com/toggleclass/ ）。

$('.btn-edit').click(function() {
  $(this).children().toggleClass('glyphicon-edit glyphicon-ok');
});

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<button type="button" class="btn btn-success btn-sm btn-edit">
  <span class="glyphicon glyphicon-edit"></span> 
</button>

Answer 2

$('.btn-edit').click(function() {
   $(this).children().toggleClass('glyphicon-edit glyphicon-ok');
 });

.glyphicon-edit{color:red}
.glyphicon-ok{color:blue}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button type="button" class="btn btn-success btn-sm btn-edit">
  <span class="glyphicon glyphicon-edit">edit</span> 
</button>

使用.toggleClass()

  

描述：根据类的存在或state参数的值，从匹配元素集中的每个元素添加或删除一个或多个类。