代码之家 › 专栏 › 技术社区 › fencepencil

单击具有多个元素但单独[关闭]的数组上的事件

javascript

fencepencil · 技术社区 · 7 年前

我试着用一个 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>

1 回复 | 直到 7 年前

Rory O'Kane Erce 7 年前

您应该将事件侦听器添加到每个元素,而不是 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));

推荐文章

code-geek · Jquery根据单选按钮选择隐藏或显示文本字段

8 月前

Niobos · 如何/是否有方法使通用算法函数同时与同步和异步函数一起工作?

8 月前

Alex · 在轻量级中同时解构和不解构变量

8 月前

Ângelo Rigo · ReactJS映射:如何迭代[关闭]

8 月前

bairog · 从按属性筛选的对象数组字典中创建值数组

8 月前

KaiMcKiernan · 基于Math.random()的函数在另一个函数内不起作用[关闭]

8 月前

David Jeong · 浏览器不会为浏览器自动添加的某些标头发送CORS预检请求吗?

8 月前

user29519291 · 为不同的变量创建一个带有可重用Click函数的简单菜单

8 月前

user3472810 · Angular@Output/EventEmitter返回undefined

8 月前

lokiuucx · JS对象属性返回未定义,尽管对象属性应该有值

8 月前