Question

我有一个像这样的JavaScript对象 -

var pages = {
    about: document.querySelector('#about'),
    meta: document.querySelector('#meta'),
    foresight: document.querySelector('#foresight')
}

querySelector是我的导航栏中的ID，HREF ID（它在页面上链接的位置）列在下面的代码中 -

我正在尝试添加一个触发smoothscroll方法的事件监听器，以转到我页面的某些区域，我让它像这样工作 -

pages.about.addEventListener('click', function(event){
    event.preventDefault();
    smoothScroll(document.querySelector('#page1'));
});

pages.meta.addEventListener('click', function(event){
    event.preventDefault();
    smoothScroll(document.querySelector('#page2'));
});

pages.foresight.addEventListener('click', function(event){
    event.preventDefault();
    smoothScroll(document.querySelector('#page3'));
});

我知道这不是最有效的方法来编写这个，并且已经尝试了一个对象forEach方法，使用if上的条件来平滑滚动到相应的页面，但它似乎不能正常工作。有人能告诉我写这篇文章的最佳实践方式吗？

谢谢

Answer 1

您可以将数据结构中的页面ID信息组合在一起，并使用循环来重用代码：

const pages = [
    { button: "about",     page: "page1" },
    { button: "meta",      page: "page2" },
    { button: "foresight", page: "page3" } 
];

for (const { button, page } of pages) {
    document.getElementById(button).addEventListener('click', function(event){
        event.preventDefault();
        smoothScroll(document.getElementById(page));
    });
}

Answer 2

以下是通过元素属性执行此操作的方法：

＆＃13;

var menuItems = document.getElementsByClassName('menu-item');

for(var i=0; i<menuItems.length; i++) {
  
  menuItems[i].addEventListener('click', function(event){
    event.preventDefault();
    smoothScroll(document.querySelector(this.getAttribute('data-target')));
  });
  
}

function smoothScroll(element) {
  alert('you are scrolling to ' + element.getAttribute('id'));
}

＆＃13;

<a id="about" href="#" class="menu-item" data-target="#page1">about</a>
<a id="meta" href="#" class="menu-item" data-target="#page2">meta</a>
<a id="foresight" href="#" class="menu-item" data-target="#page3">foresight</a>


<div id="page1">1</div>
<div id="page2">2</div>
<div id="page3">3</div>

＆＃13;

如何将addEventListener用于每个单独的对象键值对？

2 个答案: