javascript 常见问题 - 使用ES6类

Posted 2021-05-03

/**
 * Opens and closes FAQs.
 *
 */
export class Faq {
  /**
  * Constructor.
  */
  constructor() {
    /**
     * Opens and closes FAQs.
     *
     */
    class FaqAnswer {
      /**
      * Constructor.
      * @param {Node} trigger - The FAQ trigger
      * @param {Function} closeOthers - The close all others function
      */
      constructor(trigger, closeOthers) {
        this.trigger = trigger;
        this.closeOthers = closeOthers;
        this.svg = trigger.querySelector('[data-js-faq-svg]');
        this.answer = trigger.querySelector('[data-js-faq-answer]');
        this.answerActiveClass = 'faqs__faq-answer--active';
        this.svgActiveClass = 'faqs__faq-svg--active';
        this.activeState = false;

        trigger.addEventListener('click', event => this.toggleFaq(event));
      }

      /**
       * Opens the Faq
       */
      open() {
        this.closeOthers(this);
        this.answer.classList.add(this.answerActiveClass);
        this.svg.classList.add(this.svgActiveClass);
        this.activeState = true;
      }

      /**
       * Close the Faq
       */
      close() {
        this.answer.classList.remove(this.answerActiveClass);
        this.svg.classList.remove(this.svgActiveClass);
        this.activeState = false;
      }

      /**
       * Toggle the Faq
       * @param {event} event - Prevents the default action of the trigger
       */
      toggleFaq(event) {
        event.preventDefault();
        if (this.activeState === false) {
          this.open();
        } else {
          this.close();
        }
      }
    }

    const triggers = document.querySelectorAll('[data-js-faq-trigger]');
    this.answers = [];

    for (let index = 0; index < triggers.length; index++) {
      const trigger = triggers[index];
      const answer = new FaqAnswer(trigger, activeAnswer => this.closeOthers(activeAnswer));
      this.answers.push(answer);
    }
  }

  /**
   * Close all other FAQs
   * @param {FaqAnswer} activeAnswer - The active FAQ
   */
  closeOthers(activeAnswer) {
    this.answers.forEach(answer => {
      if (answer !== activeAnswer) {
        answer.close();
      }
    });
  }
}