javascript - 隐藏/显示在 Internet Explorer 中不起作用

Question

概览

我正在创建一系列 id 名为“cda2012_#”的 div，其中 # 代表顺序。它们应该出现 8.5 秒，然后被序列中的下一个 div 替换。这些 div 将无限循环。加载 div 后，下面的脚本在页面底部执行。

期望的效果

由 id 标记的特定 div 将按顺序无限期地在彼此之间循环。 (适用于 FF/Chrome)

IE9 错误

第一个 div 显示正常，但第二个 div 不显示，也不会循环回到序列中的第一个 div。

UDPATE:IE9 中的问题是序列中的下一个 div 不显示。在 Firefox/Chrome 中，div 将无限循环 8.5 秒。

更新 2:根据请求，在 div id 和脚本中从 - 切换到 _。在 IE9 中仍然没有按顺序拉下一个 div。

更新 3::根据建议更新了隐藏的 div 元素以具有背景颜色。这不会影响 IE9 中 div 之间的循环。

更新 4: 封装代码使用:j(function() {...});

---

解决方案

• 将代码封装在j(function() {...});
• 将“-”(连字符)切换为“_”(下划线)

已修复，感谢@Beetroot-Beetroot 的输入

---

<script>
    var divs = j('div[id^="cda2012_"]').hide(),
        i = 0;

    (function cycle() { 
        divs.eq(i).fadeIn(450)
            .delay(8500)
            .fadeOut(450, cycle);

            i = ++i % divs.length;
    })();
</script>

这是一个示例 div，它会出现在 HTML 中的脚本上方:

<div id="cda2012_1">
    <div id="table-hd">Project Title</div>
    <div id="table-bd">
        <span id="table-q">
            <img align="middle" alt="" src="http://aiawa.org/associations/12413/files/cda2012-hogue.png" />
            <hr id="table-hr" />
            Firm: <a href="http://lmnarchitects.com/" target="_blank">LMN</a><br />
            Photo: <a href="http://lmnarchitects.com/" target="_blank">LMN</a></span><span id="table-v"><br />
            <center>
                <span id="table-h2">Did you know?</span>
            </center><br />
            Students and faculty at Central Washington University can assemble wind turbines or test photovoltaic technologies on the &quot;working roof&quot; of their 92,000GSF LEED Platinum facility. <br />
        </span>
    </div>
</div>

Answer 1

前阵子我做了类似的事情，代码(从内存中)是这样的:

j(function() {
    var projectContainer = j("#.....");//the parent div
    projectContainer.find('.projects').hide();//select by class
    var t_ref, allowCycle = true;
    function cycle() {
        projectContainer.find('.projects:last').hide().prependTo(projectContainer).fadeIn(450);
        if(allowCycle) t_ref = setTimeout(cycle, 8950);
    };
});

据我所知，IE(版本？)没有问题。

Vars t_ref 和 allowCycle 允许在必要时停止循环。