Intro.js不会跳过隐藏的元素

Question

我已经使用Intro.js一周了，发现它不会跳过隐藏的元素：

for (var i = 0, elmsLength = allIntroSteps.length; i < elmsLength; i++) {
        var currentElement = allIntroSteps[i];

        //alert(( jQuery(currentElement).is(':visible') ));
        // skip hidden elements
        /*if (jQuery(currentElement).is(':visible') == true) {
          continue;
        }*/

        if (currentElement.style.display == 'none') {
          continue;
        }

        var step = parseInt(currentElement.getAttribute('data-step'), 10);

        if (step > 0) {
          introItems[step - 1] = {
            element: currentElement,
            intro: currentElement.getAttribute('data-intro'),
            step: parseInt(currentElement.getAttribute('data-step'), 10),
            tooltipClass: currentElement.getAttribute('data-tooltipClass'),
            highlightClass: currentElement.getAttribute('data-highlightClass'),
            position: currentElement.getAttribute('data-position') || this._options.tooltipPosition
          };
        }
      }

它仍然不起作用。

有人知道真正的问题是什么吗？ 请帮忙

Answer 1

仅当您声明内联样式时，才能获取currentElement.style.display 。 如果通过css规则进行设置，它将无法正常工作。

<div style="display: none;"> // el.style.display = 'none'
<div class="ruleWithDisplayNone"> // el.style.display = ''

jQuery方法不起作用的原因是，您的条件正在检查与您想要的相反的东西。 如果要跳过隐藏的元素，则想在该元素不可见时continue 。

if (! jQuery(currentElement).is(':visible')) {
    continue;
}

这是一个小提琴