0

jQueryを使用して li 要素を非表示および表示する際に問題が発生しています。私のコードは Chrome と Internet Explorer 9 で動作しますが、Internet Explorer 9 が互換モードに入るか、下位のブラウザーに設定されていると、暗黙のうちに失敗します。

アイデアは、クラスでフィルタリングし、結果をページングするドロップダウンを用意することです。以下のサンプルでは、​​ほとんどのページング コードを削除しました。

私が知る限り、問題は にselector.children().hide();ありますが、これについてはよくわかりません。

HTML をW3Cバリデーターで実行しましたが、問題ないように見えますが、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/

問題が発生したので、同様の Q&A をここで見ることができます: Internet Explorer で SELECT ボックスの値を取得する

あなたが尋ねた問題とはbuidPaging()関係ありませんが、 を呼び出すたびに追加の.wrap("<div class='simplePagerContainer'></div>");処理が行われるため、呼び出されるたびに DOM 構造が深くなることに気付きましたか?

于 2012-11-28T17:18:36.140 に答える