• Empleos
  • Sobre nosotros
  • Empleos
    • Inicio
    • Empleos
    • Cursos y retos
  • Empresas
    • Inicio
    • Publicar vacante
    • Nuestro proceso
    • Precios
    • Evaluaciones
    • Nómina
    • Blog
    • Comercial
    • Calculadora de salario

0

133
Vistas
Tengo esta clase que quiero hacer dinámica y hacer que funcione con múltiples elementos.

Así que obtuve esta clase para truncar el texto pero está arreglado, quiero hacerlo más dinámico. Quiero pasar la longitud del texto que quiero truncar y hacer que funcione con varios elementos. Soy un novato en las clases de JS, por lo que es un poco confuso para mí en este momento. gracias de antemano.

 class readMore { constructor() { const end = 300; this.content = '.readmore__content'; this.buttonToggle = '.readmore__toggle'; } initiate() { this.setNodes(); this.init(); this.addEventListeners(); } setNodes() { this.nodes = { contentToggle: document.querySelector(this.content), }; this.buttonToggle = this.nodes.contentToggle.parentElement.querySelector(this.buttonToggle); } init() { const { contentToggle } = this.nodes; this.stateContent = contentToggle.innerHTML; contentToggle.innerHTML = `${this.stateContent.substring(200, `${end}`)}...`; } addEventListeners() { this.buttonToggle.addEventListener('click', this.onClick.bind(this)); } onClick(event) { const targetEvent = event.currentTarget; const { contentToggle } = this.nodes; if (targetEvent.getAttribute('aria-checked') === 'true') { targetEvent.setAttribute('aria-checked', 'false'); contentToggle.innerHTML = this.stateContent; this.buttonToggle.innerHTML = 'Show less'; } else { targetEvent.setAttribute('aria-checked', 'true'); contentToggle.innerHTML = `${this.stateContent.substring(200, `${end}`)}...`; this.buttonToggle.innerHTML = 'Show more'; } } } const initReadMore = new readMore(); initReadMore.initiate();
over 3 years ago · Juan Pablo Isaza
Responde la pregunta
Encuentra empleos remotos

¡Descubre la nueva forma de encontrar empleo!

Top de empleos
Top categorías de empleo
Empresas
Publicar vacante Precios Nuestro proceso Comercial
Legal
Términos y condiciones Política de privacidad
© 2026 PeakU Inc. All Rights Reserved.

Andres GPT

Recomiéndame algunas ofertas
Necesito ayuda