error in changing fontawesome icon

Question

error in changing fontawesome icon

Navigation

#1 by (2 votes)

4

I have several buttons in a foreach in php

 <table class="table-mp3 center-block" data-directorio-album="ideas" id="reproductor">

<?php foreach($canciones as $id => $cancion):?>
 <tr class="fila">
     <td>

<!-- <span class="icon-play">
  <i class="fa fa-play fa-1x icon start" data-directorio-album="ideas" data-id-cancion="<?php echo $id; ?>" data-archivo="<?php echo $cancion['archivo']; ?>"></i>

 </span> -->



  <button type="button" class="btn btn-ttc start" data-directorio-album="ideas" 
   data-id-cancion="<?php echo $id; ?>" data-archivo="<?php echo $cancion['archivo']; ?>">
   <i class="fa fa-play fa-1x icon"></i>
  </button>

this is the code to change the icon

  $('#reproductor').find('[data-id-cancion="' + songId + '"]').removeClass( "fa-play" ).addClass( "fa-pause" );

the icon changes but badly as seen in the image.

javascript jquery html5 css3 bootstrap

asked by Rafael Hernández 07.08.2017 в 19:30

source

1 answer

MS SQL Server android connection Problem to save data with CKEDITOR PHP AND MYSQL

score 2 · Accepted Answer

You have an error in selecting the item you want to change the icon.

Currently you have:

$('#reproductor').find('[data-id-cancion="' + songId + '"]').removeClass( "fa-play" ).addClass( "fa-pause" );

This selects the button that has [data-id-cancion="' + songId + '"] but never selects the element that contains the class fa-play

Now if you do a new search within the selected element it would be as follows:

$('#reproductor').find('[data-id-cancion="' + songId + '"]').find('i').removeClass( "fa-play" ).addClass( "fa-pause" );

This can be summarized by staying:

$('#reproductor').find('[data-id-cancion="' + songId + '"] > i').removeClass( "fa-play" ).addClass( "fa-pause" );

The latter will search for a i element after [data-id-cancion="' + songId + '"]