0

我在使用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>
4

1 回答 1

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 结构都会变得更深？

于 2012-11-28T17:18:36.140 回答