我有一个脚本,该脚本可切换两个divs的内容。我目前在每个链接上使用一个事件列表者和一个单击处理程序,但需要将它们合并为一个。最后,应该有一个单击处理程序基于单击的链接来查找ID(en
或de
(,并基于此而不是以下实现来切换视图。我对如何使用一个链接的ID和基于此切换的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>
你说了。您创建一个侦听器并检查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个或更多(,当孩子单击时,它将处理。