我已经写了一个javascript文件,里面有一些事件监听器,比如制表符、折叠等。然而,这些并不是出现在每个页面中,所以它正在寻找不存在的元素,并将整个js抛到了wack之外。
我知道我可以通过使用多个if语句来解决这个问题,但这听起来并不正确。
// Accordion
const accordions = document.querySelectorAll('.accordion li');
accordions.forEach(accordion =>{
accordion.addEventListener('click', (e) => {
e.preventDefault();
accordion.classList.toggle('open');
})
});
// Inline toggle
const inlineToggle = document.getElementById('inline-toggle');
inlineToggle.addEventListener('click', () => {
inlineToggle.nextElementSibling.classList.toggle('active');
});
const inlineToggleOptions = document.querySelectorAll('.inline-toggle-options button');
inlineToggleOptions.forEach(option => {
option.addEventListener('click', (e) => {
// Prevent default
e.preventDefault();
// Update sentence text
inlineToggle.innerHTML = option.dataset.payType;
// Remove selected class from options
inlineToggleOptions.forEach(option => {
option.classList.remove('selected');
});
// Add selected class to chosen option
option.classList.add('selected');
// Close dialog
inlineToggle.nextElementSibling.classList.remove('active');
})
});
// Cover bubbles
// Create the slidepanel
const placeholder = document.getElementById('slidepanel');
// Find all buttons
const button = document.querySelectorAll('.trigger-aside');
button.forEach((button => {
// Listen for clicks on buttons
button.addEventListener('click',(e) => {
// Prevent default
e.preventDefault();
// Get the target
const target = button.dataset.target;
console.log(target);
// Call the API
fetch(`http://****.****.uk/****/****/****/${target}`)
.then((res) => res.json())
.then(function(res) {
// Load HTML into slider panel
placeholder.innerHTML = res.object.content;
// Stop body overflow
document.body.classList.add('overflow-hidden');
// Create overlay and append
const overlay = document.querySelector('.overlay');
overlay.classList.add('active');
document.body.appendChild(overlay);
// Show the panel
placeholder.classList.add('active');
document.body.appendChild(placeholder);
// Listen for close
overlay.addEventListener('click', (e) =>{
// Close requested
document.body.classList.remove('overflow-hidden');
placeholder.classList.remove('active');
overlay.classList.remove('active');
});
})
.catch(function(err) {
// Log error
console.log(err);
});
})
}));
其他人通常是如何解决这个问题的?感谢您的指导!!
发布于 2019-03-26 07:30:15
我通常建议首先考虑代码组织,其次考虑效率。我同意StevenB.的建议和Luke Tubby的回答,用最少的努力充分利用你目前的情况。
对于更复杂的解决方案,我建议熟悉构建/打包工具(例如Webpack ),这些工具为您提供了在您选择的文件和目录中构建代码(和资产)的方法,并创建特定于页面的最小化包。
另一种(完全不同且独立的)解决问题的方法(提高效率和代码组织)将是构建一个single page application……
https://stackoverflow.com/questions/55347624
复制相似问题