Question

出于某种原因，我的大脑今天早上没有运作，我错过了一些东西。我正在根据URL中的选项值显示div。一切正常，除了没有选项设置的任何原因，默认不起作用。我得到一个“TypeError：无法读取属性'1'的null”错误，它显示所有div。

                <div class="single-listing">
                    <div id="info" class="boxes">
                        <h1>DEFAULT BOX</h1>
                    </div>

                    <div id="checkout" class="boxes">
                        <h1>Checkout</h1>
                    </div>

                    <div id="recommend" class="boxes">
                        <h1>Recommend Us?</h1>
                    </div>

                    <div id="recommend-no" class="boxes">
                    </div>

                    <div id="recommend-yes" class="boxes">
                    </div>
                </div>

这是Javascript。这是在Wordpress中完成的，因此Jquery有一个包装函数。

            <script type="text/javascript">
                jQuery(document).ready(function( $ ) {
                    $(document).ready(function () {
                        var option = 'info';
                        var url = window.location.href;
                        option = url.match(/option=(.*)/)[1];
                        showDiv(option);
                    });
                    function showDiv(option) {
                        $('.boxes').hide();
                        $('#' + option).show();
                    }
                });
            </script>

Answer 1

在访问数组的索引之前，检查以确保url.match（/ option =（。*）/）不为null。

jQuery(document).ready(function( $ ) {
    $(document).ready(function () {
        var option = 'info';
        var url = window.location.href;
        var url_option = url.match(/option=(.*)/);
        if (url_option != null)
          option = url_option[1];
        showDiv(option);
    });
    function showDiv(option) {
        $('.boxes').hide();
        $('#' + option).show();
    }
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div class="single-listing">
    <div id="info" class="boxes">
        <h1>DEFAULT BOX</h1>
    </div>

    <div id="checkout" class="boxes">
        <h1>Checkout</h1>
    </div>

    <div id="recommend" class="boxes">
        <h1>Recommend Us?</h1>
    </div>

    <div id="recommend-no" class="boxes">
    </div>

    <div id="recommend-yes" class="boxes">
    </div>
</div>

Answer 2

要使默认工作，您必须在代码中包含IF语句：

        <script type="text/javascript">
            jQuery(document).ready(function( $ ) {
                $(document).ready(function () {
                    var option = 'info';
                    var url = window.location.href;
                    option = url.match(/option=(.*)/)[1];
                    if(option!=null){
                        showDiv(option);
                    }
                    else{
                        showDiv('info');
                    }
                });
                function showDiv(option) {
                    $('.boxes').hide();
                    $('#' + option).show();
                }
            });
        </script>

按URL显示Div，设置默认值

2 个答案: