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

Question

I been working with Intro.js for a week now and found out that it doesn't skip over hidden elements:

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
          };
        }
      }

it still doesn't work.

anyone know what is the real issue ? please help

Answer 1

Getting currentElement.style.display will only work if you've declared the style inline. It won't work if you're setting it via a css rule.

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

The reason your jQuery approach won't work is because your condition is checking the opposite of what you want. If you want to skip over hidden elements, you want to continue when the element isn't visible.

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

Here's a fiddle