Home / Questions / 93384
Accepted
Rafael Hernández
Asked: 2020-08-08 09:30:50 +0800 CST 2020-08-08 09:30:50 +0800 CST

fontawesome icon change error

  • 772

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" );

enter image description here

the icon changes but wrong as seen in the image.

javascript

1 Answers

  1. Best Answer

    You have an error in the selection of the element that you want to change the icon.

    You currently have:

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

    This selects the button it has [data-id-cancion="' + songId + '"]but never selects the element containing the classfa-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:

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

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

    • 2