IntroJs Hints使用问题：父元素不可见时如何跳过或隐藏提示

原代码存在的问题 #

• 遍历全页面所有元素逻辑冗余，无需处理未绑定提示的元素
• if判断后多余的分号导致逻辑分支完全失效
• getElementById传入参数错误携带#前缀，原生DOM API不需要选择器标识符
• 原生DOM元素无html()方法，需替换为innerHTML属性
• 仅判断当前元素可见性，未校验所有上级祖先元素的可见状态

修复后实现代码 #

var hintsActive = false;

// 校验元素及所有祖先元素是否可见
function checkElementFullyVisible(el) {
    let current = el;
    while (current) {
        const style = window.getComputedStyle(current);
        if (style.display === 'none' || style.visibility === 'hidden' || style.opacity === '0') {
            return false;
        }
        current = current.parentElement;
    }
    return true;
}

function introFunction() {
    const hintElements = document.querySelectorAll('[data-hints]');
    const intro = introJs();
    
    if (!hintsActive) {
        intro.showHints();
        // 隐藏所有绑定元素/父元素不可见的提示
        Array.from(hintElements).forEach((el, index) => {
            if (!checkElementFullyVisible(el)) {
                intro.hideHint(el.getAttribute('data-hint-id') || index);
            }
        });
        document.getElementById("helpFunc").innerHTML = "隐藏帮助";
    } else {
        intro.hideHints();
        document.getElementById("helpFunc").innerHTML = "显示帮助";
    }
    hintsActive = !hintsActive;
}

逻辑说明 #

• 只筛选所有绑定了data-hints属性的目标元素，避免遍历全页面元素
• 新增向上递归校验逻辑，从当前绑定元素遍历所有父元素，只要有一级元素不可见就判定该提示需要隐藏
• 显示提示后调用IntroJs原生hideHint方法隐藏无效提示，避免不可见区域的提示异常显示在页面上

内容的提问来源于stack exchange，提问作者CatGirl