Comunidad de diseño web y desarrollo en internet online

Cambiar estilo css dependiendo el contenido.

Citar            
MensajeEscrito el 13 Ago 2012 06:07 pm
Bueno muchachos les comento. Quiero cambiar el color de un elemento <p>, dependiendo el contenido que este tenga en él.

Aquí está el código que tengo.

Código :

<div class="top_header status items" id="coded">
  <p> = team.status</p>
</div>


Ese elemento <p>, va a tener 5 tipos de contenidos. Skype, Documents, Won, Lost, Follow up.
Entonces, lo que me gustaría lograr es: que si <p> tiene dentro de él escrito "Skype", entonces que el background color de este sea azul, y si el <p> dice "Documents" que el background color sea de color rojo y así. Este es el code que tengo en jQuery.

Código :

if ($("div#coded").children("p").html() == "skype") {
          $(this).addClass("skype");
   }


intenté también con:

Código :

if ($("div#coded").children("p").html() == "skype") {
          $(this).children("p").addClass("skype");
   }

Por Ferroandres

21 de clabLevel



Genero:Masculino  

Front-end + Back-end Developer

chrome
Citar            
MensajeEscrito el 13 Ago 2012 07:25 pm
En los códigos que has puesto, la palabra reservada "this" no tiene el ámbito que tú crees que tiene.

Por otro lado la igualdad que estás buscando debe ser exacta y no creo que eso sea lo que tienes.

Yo probaría con:

Código Javascript :

$ele = $("div#coded").children("p").first();
if ($ele.html() == 'skype' ) {
  $ele.addClass('skype');
}


Suponiendo que el tag <p> solo y únicamente contenga la cadena "skype".

Por DriverOp

Claber

2510 de clabLevel



 

opera
Citar            
MensajeEscrito el 14 Ago 2012 05:14 am
Si amigo, muchas gracias.
Al ver tu código llegue a esta solución para que esto se aplicara a todos y cada uno de los elementos <p> anidados en el <div>:

Código Javascript :

$("div#coded").each(function(){
      $status = $(this).children("p").first().html();
      $(this).children("p").addClass($status);

   });

Lo dejo aquí por si alguien más lo llegase a necesitar o inclusive mejorar.
Éxitos.

Por Ferroandres

21 de clabLevel



Genero:Masculino  

Front-end + Back-end Developer

chrome
Citar            
MensajeEscrito el 14 Ago 2012 01:09 pm

Ferroandres escribió:

Si amigo, muchas gracias.
Al ver tu código llegue a esta solución para que esto se aplicara a todos y cada uno de los elementos <p> anidados en el <div>:

Código Javascript :

$("div#coded").each(function(){
      $status = $(this).children("p").first().html();
      $(this).children("p").addClass($status);

   });

Lo dejo aquí por si alguien más lo llegase a necesitar o inclusive mejorar.
Éxitos.


Aunque este código funcione se puede mejorar, por ejemplo al hacer el each no estas recorriendo los elementos <p>, si no todos los div con id="coded", si esto es lo que quieres hacer deberias cambiar el id por una clase para seguir los estandares de tener un id único por cada elemento.

Otra cosa que te recomiendo es que asignes la $(this) a una variable, de esta forma lo tienes cacheado y no accedes al dom cada vez que la uses.

Con los cambios que te comento, quedaría asi:

Código Javascript :

$('div#coded p').each(function () {
    var $this = $(this),
        status = $this.text();
    
    $this.addClass(status);
});​

Puedes verlo en funcionamiento aqui: [url=http://jsfiddle.net/u24Vu/][/url]

Saludos!

Por caotz

86 de clabLevel

1 tutorial

 

firefox
Citar            
MensajeEscrito el 14 Ago 2012 03:31 pm
Claro que si, tienes toda la razón, muchas gracias.

Por Ferroandres

21 de clabLevel



Genero:Masculino  

Front-end + Back-end Developer

chrome
Citar            
MensajeEscrito el 14 Ago 2012 09:55 pm
Wooorales esa cosa del Fiddle esta super de lujo!!

yo entre y genere las clases para disfrtuar de los cambios y wow funciona muy bien para pruebas :P de lujo !!

Y ese ejemplo de obtener el texto y que ese texto sea una clase y aplicarla esta muuuy bien

Por elporfirio

Claber

652 de clabLevel

1 tutorial

Genero:Masculino  

FullStack Web Developer

firefox

 

Cristalab BabyBlue v4 + V4 © 2011 Cristalab
Powered by ClabEngines v4, HTML5, love and ponies.