0
254
VistasEl uso de javascript para alternar dinámicamente los íconos FA no devuelve el ícono original
Tengo un botón que se ve así:
<button class="btn btn-sm btn-xs-block btn-success" :data-lane-id="items[0].lane.id" type="button" v-on:click="callNextCustomer(items[0].lane.id)" :class="hasMorePeople(items)">Next Customer <i class="fas fa-bell"></i></button> Cuando se ha presionado el botón, la función callNextCustomer ejecuta lo siguiente:
const spinnerIcon = '<span class="spinner-border spinner-border-sm" role="status" aria-hidden="true"></span>'; var button = document.querySelectorAll('button[data-lane-id="'+lane_id+'"]') button[0].disabled = true; button[0].innerHTML = 'Next Customer ' + spinnerIcon; // run external request using promise // when complete run the following button[0].disabled = false; button[0].innerHTML = 'Next Customer <i class="fas fa-bell"></i>';Cuando se ejecuta el código, el texto cambia como se esperaba, pero el ícono no se muestra. Usando Google Dev Inspector, puedo ver que el ícono está presente.
¿Alguien puede explicar por qué esto no se muestra? Estoy usando Font Awesome v5, cargo tanto el CSS como el JS en mi página , cargo el siguiente JS:
<script data-search-pseudo-elements defer src="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.11.2/js/all.min.js" crossorigin="anonymous"></script>2 Respuestas
Responde la pregunta0
IIRC , esto se debe a que con la fuente impresionante 5, todos los íconos se cargan en la carga de la página. Debido a que está editando el HTML interno después del hecho, la parte "JS" de los scripts impresionantes de fuente que agregó no se activa nuevamente para actualizar con el ícono de fa-bell.
0
¿Qué sucede si carga ambos íconos y coloca la clase oculta en el otro y alterna ambas clases de íconos ocultas cuando se hace clic en el botón?
<button class="btn btn-sm btn-xs-block btn-success" :data-lane-id="items[0].lane.id" type="button" v-on:click="callNextCustomer(items[0].lane.id)" :class="hasMorePeople(items)"> Next Customer <span class="icon hidden spinner-border spinner-border-sm" role="status" aria-hidden="true"></span> <i class="icon fas fa-bell"></i> </button> .icon.hidden { display: none; }Cuando se hace clic en el botón, simplemente ejecuta el comando $.jquery que alternará la clase de .icon como oculta, cada clic en su clase cambiará a oculta.
Primero haga clic en la clase oculta <span class="icon spinner-border spinner-border-sm" role="status" aria-hidden="true"> eliminada
y se agregó la clase oculta < i class="icon hidden fas fa-bell">.
2º clic viceversa.