javascript - 合并事件监听器和点击处理程序

Question

我有一个脚本可以切换两个 div 的内容显示。我目前在每个链接上使用一个事件监听器和一个单击处理程序，但需要将它们合并为一个。最后，应该有一个点击处理程序，根据点击的链接查找 id(en 或 de)，并根据该链接切换 View ，而不是根据下面实现。我对如何使用一个链接来查找任一链接的 id 并根据该链接进行切换有点困惑。

const Terms = {
  bindEvents () {
    this.enTrigger.addEventListener('click', (e) => {
      this.langToggle(this.englishContent)
      this.enTrigger.classList.add('active')
      this.frTrigger.classList.remove('active')
    })
    this.frTrigger.addEventListener('click', (e) => {
      this.langToggle(this.frenchContent)
      this.frTrigger.classList.add('active')
      this.enTrigger.classList.remove('active')
    })
  },

  init () {
    this.englishContent = document.getElementById('english-terms')
    this.frenchContent = document.getElementById('french-terms')
    this.enTrigger = document.getElementById('en')
    this.frTrigger = document.getElementById('fr')
    this.bindEvents()
  },

  langToggle (id) {
    this.englishContent.style.display = 'none'
    this.frenchContent.style.display = 'none'
    id.style.display = 'block'
  }
}

document.addEventListener('DOMContentLoaded', () => {
  Terms.init()
})

.trigger.active {color:red;}

<div class="terms-nav">
  <a class="trigger active" id="en">English</a>
  <a class="trigger" id="fr">French</a>
</div>
<div id="english-terms">English Content</div>
<div id="french-terms" style="display:none">French Content</div>

Answer 1

你说的是。您创建一个监听器并检查 id:

const Terms = {
  bindEvents () {
    var listener = (e) => {
      var id = e.target.id; // Get the id of the element that was clicked
      if (id && this.buttons.hasOwnProperty(id)) { // Check if an element was actually selected
        this.buttons[id].classList.add('active');
        for (var i in this.buttons) { // Loop through the other elements and disable them (only one but to optimize if you add more).
          if (i != id) {
              this.buttons[i].classList.remove('active');
          }
        }
        this.langToggle(id);
      }
    };
    var languages = document.getElementById("terms-nav");
    languages.addEventListener("click", listener);
  },

  init () {
    this.buttons = {
      en: document.getElementById('en'),
      fr: document.getElementById('fr')
    };
    this.terms = {
      en: document.getElementById('english-terms'),
      fr: document.getElementById('french-terms')
    };
    this.bindEvents();
  },

  langToggle (id) {
    for (var i in this.terms) {
      if (i != id) {
        this.terms[i].style.display = "none";
      }
    }
    this.terms[id].style.display = "block";
  }
}

document.addEventListener('DOMContentLoaded', () => {
  Terms.init()
})

.trigger.active {color:red;}

<div class="terms-nav" id="terms-nav">
  <a class="trigger active" id="en">English</a>
  <a class="trigger" id="fr">French</a>
</div>
<div id="english-terms">English Content</div>
<div id="french-terms" style="display:none">French Content</div>

这样，您还可以仅将监听器附加到父级(最好只有一个事件处理程序，而不是 2 个或更多)，并且它将在单击子级时进行处理。