0

tengo una pequeña duda a ver si pueden hecharme una mano para resolverla, quiero cambiar el fondo de un div al hacer click, os pongo en situacion

Tengo 5 divs, todos con el mismo nombre de clase, al hacer click en el div número uno quiero que cambie el color de fondo pero si luego hago click en el div numero dos quiero que el div numero uno vuelva a tener el background anterior y ahora cambie el fondo del div número dos

<div class="visitas" (click)="enableDisableRule()" [style.background-color]="toggle ? '#8f9ba6' : '#5a6668'">
    <span>Juan López - 10:30</span>
</div>

Esto es lo que tengo en mi componente TS

  toggle = true;
  status = 'Enable'; 

  enableDisableRule(job) {
    this.toggle = !this.toggle;
    this.status = this.toggle ? 'Enable' : 'Disable';
  }
2
  • ¿ Pero solo cambiará de color el div1 ¿ que pasa si pulso primero en el 3, 4 ó 5 y luego hago click en el mismo ? Puedes agregar el funcionamiento completo o sólo tiene el funcionamiento el 1º div ?
    – EduBw
    el 8 may. 2019 a las 8:32
  • Hola @EduBw al hacer click en el div 1 cambiara de color si hago click en el div 2 cambia de color el div 2 y el div 1 vuelve a su color original, si hago click en el div 3 el div 2 vuelve a su color original y el div 3 cambia de color, así sucesivamente, es como si fuese un botón pulsado... el 9 may. 2019 a las 6:36

2 respuestas 2

2

Una posible solución:

html

<div class="visitas" (click)="enableDisableRule($event.target)">
    <span>Juan López - 10:30</span>
</div>

ts

enableDisableRule(elem) {
   const colorOne = "rgb(90, 102, 104)";
   const colorTwo = "rgb(143, 155, 166)";
   if (elem.className !== "visitas"){ 
      elem = elem.closest('.visitas'); 
   }
   elem.style.backgroundColor = (elem.style.backgroundColor == colorOne) ? colorTwo : colorOne;
 }
  • No se esta inicializando con ningún background-color por defecto, si deseas hacerlo debes agregarlo en la clase "visitas" o añadiéndolo directamente con el atributo "style" en el elemento html.

  • Los colores deben estar en formato rgb para que la validación de elem.style.backgroundColor == colorOne sea correcta, ya que al asignar un color con el style.backgroundColor de javascript lo transforma automáticamente a rgb.

  • El $event.target nos puede devolver el elemento en el que tenemos la funcion (click) o algun elemento hijo en caso de que se haga click en alguno de ellos, por eso el siguiente if:

    if (elem.className !== "visitas"){ elem = elem.closest('.visitas'); }

Aquí tienes una pequeña prueba de como funciona: https://stackblitz.com/edit/angular-auws9w

0

Mi solución es la siguiente manteniendo tu lógica:


status = 'Enable';
toggle = [true, true, true, true, true];


enableDisableRule(idx) {
    if ( this.toggle[idx] ) {
      this.toggle[idx] = false;
      let cnt = 0;
      this.toggle.forEach( e => {
        if ( cnt !== idx ) {
          this.toggle[cnt] = true;
        }
        cnt++;
      });
    } else {
      this.toggle[idx] = true;
    }
    this.status = this.toggle[idx] ? 'Enable' : 'Disable';
  }

En el html

<div class="visitas" (click)="enableDisableRule(0)" [style.background-color]="toggle[0] ? '#8f9ba6' : '#5a6668'">
  <span>Juan López - 10:30</span>
</div>

<div class="visitas" (click)="enableDisableRule(1)" [style.background-color]="toggle[1] ? '#8f9ba6' : '#5a6668'">
  <span>Juan López - 10:30</span>
</div>

<div class="visitas" (click)="enableDisableRule(2)" [style.background-color]="toggle[2] ? '#8f9ba6' : '#5a6668'">
  <span>Juan López - 10:30</span>
</div>

<div class="visitas" (click)="enableDisableRule(3)" [style.background-color]="toggle[3] ? '#8f9ba6' : '#5a6668'">
  <span>Juan López - 10:30</span>
</div>

<div class="visitas" (click)="enableDisableRule(4)" [style.background-color]="toggle[4] ? '#8f9ba6' : '#5a6668'">
  <span>Juan López - 10:30</span>
</div>

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.