0

Estoy trabajando con un sitio de wordpress. Hice una funcion con javascript que agrega una clase a la etiqueta body las cuales usare para mostrar un fondo diferente segun la categoria. Funciona bien cuando la categoria es una sola palabra. Pero cuando tengo una categoria que se compone de 2 palabras deja de funcionar. Este es el codigo:

( window.onload=function() {
  let cat = document.querySelector('.cats').lastElementChild.textContent;
  body = document.querySelector('body');
  body.classList.add(cat.toLowerCase());
})();

Si la categoria es "dentista" entonces se agrega este string a la etiqueta body pero si es "Medico General" ya no se agrega a .

Utilizo functions.php para llamar a esta funcion solo cuando es un post usando if is_single().

Que puedo hacer para que esto "Medico General" se pueda agregar como medico-general a las clases de la etiqueta body?

1
  • No se permiten añadir clases con espacios: puedes utilizar cat.replace(' ','-').toLowerCase() Commented el 28 feb. 2019 a las 6:21

1 respuesta 1

1

Comprobandolo en toolKitDevelop me da esta salida, tiene sentido, cuando añades varias clases si que puedes formatear con espacion, pero en este caso el metodo classList.add() solo añade una; internamente debe lanzar la excepción:

Failed to execute 'add' on 'DOMTokenList': The token provided ('medico familia') contains HTML space characters, which are not valid in tokens.

ACTUALIZADO: Cuando son 2 palabras separadas por un espacio deberia ir, pero cuando son mas de 2 palabras o mas de un espacio, solo remplaza el primero que encuentra. Pero estas de suerte porque el metodo replace admite expresiones reguraleres, asique si le dices que remplace todos los espacion de manera global podras solucionarlo:

document.querySelector('body').classList.add('pepe caca kk'.replace(/\ /g,'-').toLowerCase())

Una expresion regular se enmarca por // y envuelto va el patron de caracteres, en este caso un espacio debe ser escapado por \ ,la g significa globalmente

5
  • OK eso me da una idea/opcion de como manejarlo usando condicionales. Gracias Dani
    – Agustin
    Commented el 28 feb. 2019 a las 6:31
  • Ya modifique el codigo pero aun no me funciona: ` ( window.onload=function() { let cat = document.querySelector('.cats').lastElementChild.textContent; let body = document.querySelector('body'); if(cat.indexOf(' ') >= 0) { cat.replace(' ','-'); body.classList.add(cat.toLowerCase()); } else { body.classList.add(cat.toLowerCase()); } })(); `
    – Agustin
    Commented el 28 feb. 2019 a las 14:39
  • Lo anterio funciona cuando la categoria es solo 1 palabra pero si son 2 o mas no.
    – Agustin
    Commented el 28 feb. 2019 a las 14:40
  • La clase médico-general existe? Commented el 28 feb. 2019 a las 17:02
  • agustin he editado la respuesta con una actualización espero que te vaya Commented el 1 mar. 2019 a las 21:04

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.