Question

我试图循环使用for...of循环的数组，但是需要将数组中的每个元素作为单独的单击事件（不要抓取所有这些） - 不使用jQuery。

这是我到目前为止所拥有的......

const dataScrollTo = document.querySelectorAll('[data-scroll-to]');
let ss = 1000;
let o = 0;

const scrollMe = function scrollMe() {
    for (const el of dataScrollTo) {
        const trigger = el.getAttribute('data-scroll-to');
        const target = document.getElementById(trigger);
        const dsoGet = el.getAttribute('data-scroll-offset');
        const dssGet = el.getAttribute('data-scroll-speed');

        target.scrollIntoView({
                behavior: 'smooth'
        });

        if (dsoGet) {
            o = dsoGet;
        }
        if (dssGet) {
            ss = dssGet;
        }
    }
};
document.addEventListener('click', scrollMe);

HTML（有一些类似于这个的导航div）。

<div>
  <a class="icon-link" data-scroll-to="research" data-scroll-offset="60">
  </a>
</div>

Answer 1

您应该为每个元素添加事件侦听器，而不是document。监听器可以使用this来判断单击了哪个元素。

function scrollMe() {
    const el = this;
    const trigger = el.getAttribute('data-scroll-to');
    const target = document.getElementById(trigger);
    const dsoGet = el.getAttribute('data-scroll-offset');
    const dssGet = el.getAttribute('data-scroll-speed');

    target.scrollIntoView({
            behavior: 'smooth'
    });

    if (dsoGet) {
        o = dsoGet;
    }
    if (dssGet) {
        ss = dssGet;
    }
}

dataScrollTo.forEach(el => el.addEventListener("click", scrollMe));

单击具有多个元素的数组上的事件

1 个答案: