如何遍历 JavaScript 循环，所有输出都可用于 DOM

Question

I have a function that looks at an array of objects and runs a for loop to iterate through and creates a couple jquery functions. Everything is working great, except when it finishes the DOM only sees the last iteration of the for loop. It's printing out buttons on a page and I want each button to display the tooltip that is associated with it so I'm needing each iteration of the for loop to be available. Any help or tips to clean this up would be great!

$(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"
                    });
                });

            })}
        });

Answer 1

I think there's an easier, more elegant solution.

You can set up a class for all those buttons, like .invbuttons .

Then it's easy to get a list of them with the querySelectorAll javascript method:

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

Lastly you only have to declare the appropriate methods for each case:

function onMouseOver() {
    ...
}

function onMouseOut() {
    ...
}

Good luck!