0
322
VistasReescriba el código en clases utilizando la programación orientada a objetos (POO)
Hice una calificación como en el video del autor: https://www.youtube.com/watch?v=dsRJTxieD4U
const rateStars = document.querySelectorAll('.js-rate'); rateStars.forEach((rateStar, clickedIdx) => { rateStar.addEventListener('click', () => { rateStars.forEach((otherRateStar, otherIdx) => { if (otherIdx <= clickedIdx) { otherRateStar.classList.add('rate__item_active'); }; }); }); });Todo funciona perfectamente, pero mi tarea es crear una clase js (OOP)
//rate.pug mixin rate(params = {}) - const { rating= "", } = params; let i = 0; .rate ul.rate__list while i < 5 if (i < rating) li.rate__item(class= "js-rate rate__item_active") else li.rate__item(class= "js-rate") - i++Obtuve la siguiente estructura de código:
// index.js import Rate from './Rate'; const rateStars = document.querySelectorAll('js-rate'); rateStars.forEach((rateStar, clickedIdx) => new Rate(rateStar, clickedIdx)); // Rate.js class Rate { constructor(rateStar, clickedIdx) { this.rateStar = rateStar; this.clickedIdx = clickedIdx; this.bindEventListeners(); } bindEventListeners() { this.rateStar.addEventListener('click', this.handleRateClick.bind(this)); } handleRateClick() { this.rateStar.classList.add('rate__item_active'); } } export default Rate; Sin embargo, no tengo idea de cómo proceder desde aquí. Lo siento, soy un completo novato. Es la primera vez que hago una pregunta aquí. la tarea se complica por el hecho de que necesita colocar varias calificaciones en una página. Escribo algunos mixins: 
Cuando hay varias calificaciones en la página, las estrellas se agregan a todas las calificaciones.
1) este es el estado predeterminado
- Después de hacer clic
1 Respuestas
Responde la pregunta0
Entonces, el problema de su cambio a la clase es que no está agregando rate__item_active a las estrellas anteriores como lo está haciendo en el primer ejemplo de código.
Entonces, para que su clase funcione como el primer ejemplo de código, así es como debe hacerlo:
// index.js import Rate from './Rate'; rateStars.forEach((rateStar, index) => new Rate(rateStar, index, rateStars)); // Rate.js class Rate { constructor(rateStar, index, rateStars) { this.rateStar = rateStar; this.clickedIdx = index; this.rateStars = rateStars; this.bindEventListeners(); } bindEventListeners() { this.rateStar.addEventListener('click', this.handleRateClick.bind(this)); } handleRateClick() { for(let i = 0; i <= this.clickedIdx; i++) { this.rateStars[i].classList.add('rate__item_active'); } } } export default Rate;