jQuery - hide() 在 Internet Explorer 9 兼容模式下不起作用答案

【问题标题】：jQuery - hide() is not working in Internet Explorer 9 compatibility modejQuery - hide() 在 Internet Explorer 9 兼容模式下不起作用
【发布时间】：2012-11-28 16:56:44
【问题描述】：

我在使用jQuery 隐藏和显示 li 元素时遇到问题。我的代码可以在 Chrome 和 Internet Explorer 9 中运行，但如果 Internet Explorer 9 进入兼容模式，或者设置为较低的浏览器，它会静默失败。

我们的想法是有一个按类别过滤的下拉菜单，并分页显示结果。对于下面的示例，我已经删除了大部分分页代码。

据我所知，问题出在selector.children().hide();，尽管我对此不确定。

我通过W3C 验证器运行了 HTML，它看起来很好，而我在 Chrome 工具中没有发现 JavaScript 错误，在 Internet Explorer 开发工具中也没有明显的错误（尽管我对这些不太熟悉并且可以错过了什么）。

如果您将以下内容保存到 HTML 文件中，您应该会看到一个下拉菜单，当您选择过滤 li 元素时。至少在 Chrome 中：

<!DOCTYPE html>
<html>
    <head>
        <title>Test</title>
        <script src="http://code.jquery.com/jquery-latest.js"></script>
    </head>

    <body>
        <script>
            //<![CDATA[
                function buildPaging(filterClass) {
                    var selector = $('.paging');
                    selector.wrap("<div class='simplePagerContainer'></div>");

                    var pageSize = 2;
                    var pageCounter = 1;
                    var currentPage = 1;
                    var step =0;

                    selector.children().each(function (i) {
                        var item = $(this);
                        var hasClass = false;
                        if (filterClass !== undefined &&
                            filterClass !== '' &&
                            filterClass !== 'Sites:' &&
                            item.hasClass(filterClass)) {

                            hasClass = true;
                        }
                        else
                            if (filterClass === undefined ||
                                filterClass === '' ||
                                filterClass === 'Sites:') {

                                hasClass = true;
                            }

                        if (step < pageCounter * pageSize && step >= (pageCounter - 1) * pageSize && hasClass) {
                            $(this).addClass("simplePagerPage" + pageCounter);
                            step++;
                        }
                        else
                            if (hasClass) {
                                $(this).addClass("simplePagerPage" + (pageCounter + 1));
                                pageCounter++;
                                step++;
                            }
                    });
                    selector.children().hide();
                    selector.children(".simplePagerPage" + currentPage).show();
                };

                function cleanPaging() {
                    $('li').removeClass('simplePagerPage1 simplePagerPage2 simplePagerPage3 simplePagerPage4 simplePagerPage5 simplePagerPage6 simplePagerPage7 simplePagerPage8')
                    $('.simplePagerNav').remove();
                }

                $(document).ready(function() {
                   buildPaging();
                });

                var selectedItem;

                function hideMessage(period) {
                    var classList = $('.EMI_Message_Option');
                    selectedItem = period;
                    var keep;
                    for (var i = 0; i < classList.length; i++) {
                        if (classList[i].innerHTML !== period) {
                            $('.' + classList[i].innerHTML).hide();
                        }
                        else {
                            keep = classList[i].innerHTML;
                        }
                    }
                    $('.' + keep).show();
                    cleanPaging();
                    buildPaging(period);
                }
            //]]>
        </script>

        <div class="EMI_Messages">
            <div class="EMI_Messages">

            <div class="MessageDropdown">
                <select onchange="hideMessage(this.value)">
                    <option>Sites:</option>
                    <option>CSR</option>
                    <option>Sales</option>
                </select>
            </div>
            <ul class="paging">
                <li class="CSR">
                    <div>
                        <div>
                            <a href="http://example.com/">CSR</a>
                        </div>
                        <div>byline</div>
                        <div>11/26/2012 12:00:00 AM</div>
                    </div>
                </li>
                <li class="Sales">
                    <div>
                        <div>
                            <a href="http://example.com/">Sales</a>
                        </div>
                        <div>sample text</div>
                        <div>11/21/2012 12:00:00 AM</div>
                    </div>
                </li>
            </ul>
        </div>
        <div class="pager"></div>
        </div>
    </body>
</html>

【问题讨论】：

标签： javascript jquery internet-explorer-9

【解决方案1】：

问题似乎是由这段 HTML 引起的：

<select onchange="hideMessage(this.value)">

在某些版本的 IE 中，this.value 没有按需要传递给 hideMessage() 函数。它作为空字符串传递，因此代码不起作用。

如果改成这样对我有用：

<select onchange="hideMessage(this.options[this.selectedIndex].value)">

仅供参考，这是您在 jsFiddle 中应用修复的代码：http://jsfiddle.net/jfriend00/9hUK9/

既然我们看到了问题，你可以在这里看到类似的问答：Getting the value of a SELECT box in Internet Explorer

与您询问的问题无关，您是否意识到每次调用 buidPaging() 时，它都会额外执行一次 .wrap("<div class='simplePagerContainer'></div>");，因此每次调用时您的 DOM 结构都会变得更深？

【讨论】：

感谢@jfriend00 这正是问题所在。抱歉花了这么长时间，我在工作结束时问了这个问题，然后（在英国）刚进入。