change the class of i with JQuery

Navigation
4

Hi, I want to know if I can change the class of <i> with jquery that is with .attr but I do not know how to capture the or select the <i> , what I want is that when I click on the class I know that it is an icon, change it to another class="fa fa-minus" I leave my code of my button.

BUT WHEN YOU AGAIN CLICK ON THE OTHER CLASS 

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


$('#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");
            }
        });
    });
    
asked by Ivan More Flores 19.06.2017 в 15:40
source

2 answers

4

You can put the original class in a data attribute to make it more generic: 

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

Then you make a 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'));

This way you can use any class (s).

    
answered by 19.06.2017 / 15:43
source
2

You can use double toggle :

The class that is not added is added and the one that is is removed: 

$('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>

If the class to be exchanged is after the initial class, a single toggle is enough

It is not necessary to validate or double toggle if they are in order in the css, remember that the styles of the last class declared overwrite those of the previous classes, so it is enough with a toggleClass that you add and remove the last class in this case the fa-minus .

  

Note: For this to work it is very important that the styles of the initial class be before those of the class to be added. otherwise, this would not work. 

$('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>
    
answered by 19.06.2017 в 17:18
Is not it necessary to initialize an accumulator? Perform a comma split taking into account if there are quotes