javascript - 具有多个元素但单独的数组上的单击事件

Question

关闭。此题需要 details or clarity 。目前不接受答案。

---

想要改进这个问题吗？通过 editing this post 添加详细信息并澄清问题.

已关闭 5 年前。

Improve this 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));