Intro.js 不会跳过隐藏元素答案

【问题标题】：Intro.js doesn't skip over hidden elementIntro.js 不会跳过隐藏元素
【发布时间】：2016-06-29 08:37:15
【问题描述】：

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

还是不行。

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

【问题讨论】：

这取决于标记和样式。您应该提供可以重现此问题的测试设置。
你需要提供更多代码，你的循环在哪里？
@billyonecan 我刚刚更新了请看一下
@billyonecan 在他的帖子中所说的至关重要。 continue 关键字用于跳过当前迭代但继续循环。（与 break 相比，skips 当前迭代，然后 break 退出循环，即停止循环。）
嘿，Intro.js 的作者来了。我正在为下一个版本修复它。对此感到抱歉。

标签： php jquery intro.js

【解决方案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;
}

Here's a fiddle

【讨论】：

@billyonecam 它不工作。 if (! jQuery(currentElement).is(':visible')) { 和 if ( jQuery(currentElement).is(':visible') == false) { 仍然不起作用。我不是通过 CSS 设置它，而是通过 JQUERY .hide()