4

Hola deseo saber si puedo cambiar el class de <i> con jquery se que es con .attr pero nose como capturar el o seleccionar el <i>, lo que quiero es que cuando le de click el class que efectivamente se que es un icono cambiarle por otro class="fa fa-minus" dejo mi codigo de mi boton.

PERO CUANDO OTRA VEZ LE DEAN CLICK VUELA AL OTRO CLASS

    <div onclick="detalle_venta(9)" class="text-center details-control">
<a><i class="fa fa-plus-circle fa-2x"></i>
</a>
</div> 

introducir la descripción de la imagen aquí

$('#tabla_ventas tbody').on('click', 'div.details-control', function () {
        var tr = $(this).closest('tr');
        var row = tabla_ventas.row(tr);
        $.ajax({
            url: baseurl + 'Caja/traer_detalle',
            type: "POST",
            cache: false,
            data: {codigo: codigo},
            success: function (result) {
                if (row.child.isShown()) {

                    row.child.hide(result);
                    tr.removeClass('shown');
                } else {

                    row.child(result).show();
                    tr.addClass('shown');
                }
            },
            error: function (result) {
                alert("error");
            }
        });
    });
2
  • puedes mostrar tambien el html para poder hacer un codigo ejecutable con los snippets del editor?
    – lois6b
    Commented el 19 jun. 2017 a las 13:43
  • Y lo puse con html Commented el 19 jun. 2017 a las 13:47

2 respuestas 2

5

Puedes poner la clase original en un atributo data para hacerlo más genérico:

<i data-original="fa fa-2x fa-plus-circle" class="fa fa-2x fa-plus-circle"></i>

Luego haces un simple toggle:

JavaScript

var i = this.querySelector('fa-plus-circle');
i.className = i.classList.contains('i') ? 'fa fa-minus' : i.getAttribute('data-original');

jQuery

var i = $(this).find('i');
i.attr('class', i.hasClass('fa-plus-circle') ? 'fa fa-minus' : i.attr('data-original'));

De esta manera te vale para cualquier clase(s).

8
  • Gracias por tu respuesta, por ende marque como correcta espero recibir un voto a favor, Gracias Commented el 19 jun. 2017 a las 13:57
  • Ya está tu voto ;)
    – gugadev
    Commented el 19 jun. 2017 a las 13:58
  • 1
    @IvanMoreFlores por ende marque como correcta espero recibir un voto a favor, Gracias ... Muy original. Sendos +1 de mi parte :) en la pregunta y en la respuesta.
    – A. Cedano
    Commented el 19 jun. 2017 a las 14:02
  • No termino de comprender por qué seleccionas en jQuery, luego pasas a JS puro, luego de JS puro de nuevo a jQuery... ¿no sería mejor concentrarse en uno y hacerlo sin mezclar?
    – Alvaro Montoro
    Commented el 19 jun. 2017 a las 14:44
  • 1
    @AlvaroMontoro Sin embargo, estoy de acuerdo con tu punto. He actualizado mi respuesta para añadir ambas formas. Te agradezco tu observación.
    – gugadev
    Commented el 19 jun. 2017 a las 16:07
2

Puedes usar un doble toggle:

Se agrega la clase que no esté y se quita la que esté:

$('i').click(function() {
  $(this).toggleClass('fa-minus').toggleClass('fa-plus');
});
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>


<i class="fa fa-2x fa-plus"></i>

Si la clase a intercambiar está después de la clase inicial, basta con un solo toggle

No es necesario validar o hacer doble toggle si es que están en orden en el css, recuerden que los estilos de la última clase declarada sobreescribe los de las clases anteriores, por lo que basta con un toggleClass que agregue y quite la última clase en este caso el fa-minus.

Nota: Para que esto funciona es muy importante que los estilos de la clase inicial estén antes que los de la clase que se va a agregar. en caso contrario, esto no funcionaría.

$('i').click(function() {
  $(this).toggleClass('fa-minus');
});
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>


<i class="fa fa-2x fa-plus"></i>

3
  • 1
    "los estilos de la última clase sobreescriben los de las clases anteriores" esto no es del todo correcto. En este caso funciona porque fa-plus aparece antes que fa-minus en el CSS de FontAwesome, y a igual especificidad, se aplica la última regla en la hoja de estilos. Pero si apareciese después, no funcionaría y se mostraría siempre el + (por ejemplo, si las clases fueran fa-plus-square y fa-minus, esta solución no funcionaría).
    – Alvaro Montoro
    Commented el 19 jun. 2017 a las 16:49
  • Cierto, cierto tienes toda la razón.. me crucé jaja.. los de la última clase declarada en el .css no en el atributo.
    – Ali
    Commented el 19 jun. 2017 a las 17:20
  • Gracias @AlvaroMontoro, ya edité.
    – Ali
    Commented el 19 jun. 2017 a las 17:28

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.