时间戳

首页 > 解决方案 > 如何使用 DOM 可用的所有输出遍历 JavaScript for 循环

javascript - 如何使用 DOM 可用的所有输出遍历 JavaScript for 循环

问题描述

我有一个函数，它查看一个对象数组并运行一个 for 循环来迭代并创建几个 jquery 函数。一切都很好，除了当它完成时 DOM 只看到 for 循环的最后一次迭代。它正在打印页面上的按钮，我希望每个按钮都显示与其关联的工具提示，因此我需要 for 循环的每次迭代都可用。任何清理它的帮助或提示都会很棒！

$(window).load(function () {
            var i;
            for (i = 1; i <= array.length; i++) {
                (function(){
                var invbuttons = "#invbuttons" + i;
                var tooltip = "#tooltip" + i;
                $(invbuttons).on("mouseover", function () {
                    $(tooltip).css({
                        visibility: "visible",
                        width: "500px"
                    });
                });
                $(invbuttons).on("mouseout", function () {
                    $(tooltip).css({
                        visibility: "hidden",
                        width: "0px"
                    });
                });

            })}
        });

标签： javascriptjquery

解决方案

我认为有一个更简单、更优雅的解决方案。

您可以为所有这些按钮设置一个通用类，例如.invbuttons.

然后很容易使用querySelectorAlljavascript 方法获取它们的列表：

document.querySelectorAll('.invbuttons').forEach(btn => {
    btn.addEventListener('mouseover', onMouseOver)
    btn.addEventListener('mouseout', onMouseOut)
})

最后，您只需为每种情况声明适当的方法：

function onMouseOver() {
    ...
}

function onMouseOut() {
    ...
}

祝你好运！

推荐阅读