Selector using bootstrap labels

by Daniel Mejia

HTML

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script>
<div class="inline-block" style="font-size:28px;">
    <a class="skill label label-default">xxxxx xxxxxx xxxx<span></span></a>
    <a class="skill label label-default">xxxxx xxxxxx x<span></span></a>
    <a class="skill label label-default">xxxxxx xxxxxxx<span></span></a>
    <a class="skill label label-default">xxxxx<span></span></a>
    <a class="skill label label-default">xxxxxxxx<span></span></a>
</div>

JavaScript

$(document).ready(function(){
    $(".skill.label").on("click",function(e){
        
        if($(this).hasClass("label-success")==true){
            $(this).removeClass("label-success").addClass("label-default");
            $(this).children("span").removeClass("glyphicon glyphicon-ok");
        }else{
            $(this).removeClass("label-default").addClass("label-success");
            $(this).children("span").addClass("glyphicon glyphicon-ok");
        }
    });
});