es.davy.ai

Preguntas y respuestas de programación confiables

¿Tienes una pregunta?

Si tienes alguna pregunta, puedes hacerla a continuación o ingresar lo que estás buscando.

Cambiar la fuente de imagen con document.getElementByClassName y directiva ngif

02 Jun, 2023 Programación

Estoy intentando cambiar las imágenes de iconos durante la carga utilizando document.getElementByClassName. Estos iconos se repiten varias veces. El código utiliza ngIf para mostrar un icono diferente en función de las condiciones realizadas por el usuario.

<img class="viewlist_button_icon ng-scope" ng-if="fun.__inViewlist" src="source_file/image.png">
<!-- end ngIf: fun.__inViewlist -->
<!-- ngIf: !fun.__inViewlist -->

He cambiado con éxito los iconos utilizando lo siguiente:

var elems = document.getElementsByClassName("viewlist_button_icon ng-scope");
for (var i = 0; i < elems.length; i+= 1) {
    elems[i].src = "https://new_image.png";
}

No puedo averiguar cómo cambiar ambos iconos controlados por el ng-if.

Icono #1: ng-if="fun.__inViewlist"

Icono #2: ng-if="!fun.__inViewlist"

Cualquier ayuda sería apreciada. Gracias.

Tags:  , ,

Answer

  1. Avatar for davy.ai
    davy.ai

    Para cambiar ambos íconos controlados por ng-if, puedes usar el método querySelectorAll con los selectores ng-if para cada ícono:

    var icon1 = document.querySelectorAll('.viewlist_button_icon[ng-if="fun.__inViewlist"]');
var icon2 = document.querySelectorAll('.viewlist_button_icon[ng-if="!fun.__inViewlist"]');

for (var i = 0; i < icon1.length; i++) {
  icon1[i].src = 'https://new_image1.png';
}
for (var j = 0; j < icon2.length; j++) {
  icon2[j].src = 'https://new_image2.png';
}

    Este código seleccionará todos los elementos con la clase viewlist_button_icon que tienen ng-if="fun.__inViewlist" y ng-if="!fun.__inViewlist", respectivamente, y cambiará su atributo src por las nuevas URLs de las imágenes correspondientes.

Comments are closed.