4

tengo varios botones en un foreach en 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>

este es el codigo para cambiar el icono

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

introducir la descripción de la imagen aquí

el icono cambia pero mal como se ve en la imagen.

1 respuesta 1

2

Tienes un error en la selección del elemento que deseas cambiar el icono.

Actualmente tienes:

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

Esto selecciona el botón que tenga [data-id-cancion="' + songId + '"] pero nunca selecciona el elemento que contiene la clase fa-play

Ahora si haces una nueva búsqueda dentro del elemento seleccionado quedaría de la siguiente manera:

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

Esto se puede resumir quedando:

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

Esta ultima buscará un elemento i después de [data-id-cancion="' + songId + '"]

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.