Как перебрать цикл JavaScript для всех выходов, доступных для DOM

Question

У меня есть функция, которая просматривает массив объектов и запускает цикл 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"
                    });
                });

            })}
        });

Answer 1

Я думаю, что есть более простое, более элегантное решение.

Вы можете установить общий класс для всех этих кнопок, например .invbuttons.

Тогда легко получить списоких с помощью querySelectorAll метода javascript:

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

Наконец, вам нужно только объявить соответствующие методы для каждого случая:

function onMouseOver() {
    ...
}

function onMouseOut() {
    ...
}

Удачи!