intro.js - 如何使用 intros 属性方法跳过不可见元素

Question

我正在使用 introJS，我们的模板设计团队只能使用 data-intro 属性，但他们也使用选项卡和其他 javascript 来隐藏或显示某些元素。

当 introJS 运行时，对于那些隐藏元素(隐藏或在另一个选项卡中)，它会在左上角 (0,0) 位置显示指南。

有什么办法，我们可以跳过不可见的元素，而只使用属性方法。我们可以添加任何 js 文件，所以如果我们可以配置一次 introjs 来实现这一点并包含该文件。

谢谢你。

Answer 1

好的，

所以我通过一个包装函数实现了它，并留在这里给其他需要的人。

这是我的包装函数看起来像

runIntro: function(object){

    $('[data-intro]:hidden').each(function(index,obj){
        var $t = $(this);
        $t
            .attr({
                'data-intro-hidden' : $t.attr('data-intro'),
            })
            .removeAttr('data-intro')
        ;
    });

    $('[data-intro-hidden]:visible').each(function(index,obj){
        var $t = $(this);
        $t
            .attr({
                'data-intro' : $t.attr('data-intro-hidden'),
            })
            .removeAttr('data-intro-hidden')
        ;
    });

    if(typeof object === undefined)
        introJs().start();
    else
        introJs(object).start();
}

这样，我们仍然使用属性，隐藏元素被静音或跳过以进行介绍。

对我来说很好:)