[SOLUCIONADO] cambiar icono en evento clic

[ariann]

Buen día.
Estoy aprendiendo jquery, y practicando algunos ejercicios me trabe en lo siguiente:

Tengo círculos de colores que cambian el color de fondo de un div al hacer clic.



Como ven el circulo seleccionado tiene un icono adentr, lo que yo quiero hacer es que ese icono cambie cuando se hace clic sobre otro.

Código HTML:

<center>
<button type="button" class="btn btn-default btn-circle btn-xl"> <i id="btn1" class="glyphicon glyphicon-ok"></i></button>
<button type="button" class="btn btn-primary btn-circle btn-xl"><i id="btn2" class="glyphicon"></i></button>
<button type="button" class="btn btn-success btn-circle btn-xl"><i id="btn3" class="glyphicon"></i></button>
<button type="button" class="btn btn-info btn-circle btn-xl"><i id="btn4" class="glyphicon"></i></button>
<button type="button" class="btn btn-warning btn-circle btn-xl"><i id="btn5" class="glyphicon"></i></button>
<button type="button" class="btn btn-danger btn-circle btn-xl"><i id="btn6" class="glyphicon"></i></button>
</center> 

Y lo que empecé a hacer en jquery es:

Código Javascript:

$("button").click(function(){
        $(".glyphicon").removeClass("glyphicon-ok");
        $(this).addClass("glyphicon-ok");
    });
 

Primero borra el elemento, pero no lo vuelve a agregar en el nuevo circulo..

Si alguien me puede orientar voy a estar muy agradecido.
Desde ya mil gracias por su tiempo!

[Drako_18]

Buenas compañero,

Ten en cuenta que estás agregando la clase al <button>, y por lo que veo en el ejemplo, se lo quieres agregar al elemento <i>...

Prueba con esto:

Código Javascript:

$(this).children("i").addClass("glyphicon-ok");
 

Si necesitas otra cosa... Avisa!


Un saludo compañero!!!

[ariann]

Funciona perfecto!
Ahora voy entendiendo un poco más
Muchísimas gracias por tu tiempo amigo!