JQuery переключения самозагрузка класс

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

You может использовать 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()

Описание: Добавить или удалить один или несколько классов фр om каждый элемент в наборе согласованных элементов, в зависимости от присутствия класса или значения аргумента состояния.