jquery - 类型错误 : variable is undefined; i get this error in specific pages

Question

我计划将一个文本(垂直)放在一个 div 中(应该居中并且在黑色区域 [in border-left])。但是我在一些结构中没有这个类名的页面中得到这个错误(TypeError:变量未定义)，换句话说，这个 div.class 不存在。这段代码在没有这个类名的页面中工作正常任何错误。我该怎么办？

http://cdpn.io/qhGFu

HTML:

    <div class="container" style="margin-top:80px;">
        <div class="row">
            <div class="tree clearfix">
                <div class="​​col-lg-8 col-md-8 col-sm-8 col-xs-8">
                    <div class="tree-content WhiteSkin tab-content">
                        <div class="tree-pane tab-pane fade" id="A">
                            <p>
                                John Doe, Director at Company.
                                John Doe, Director at Company.
                                John Doe, Director at Company.
                                John Doe, Director at Company.
                                John Doe, Director at Company.
                                John Doe, Director at Company.
                                John Doe, Director at Company.
                                John Doe, Director at Company.
                                John Doe, Director at Company.
                                John Doe, Director at Company.
                                John Doe, Director at Company.
                                John Doe, Director at Company.
                                John Doe, Director at Company.
                                John Doe, Director at Company.
                                John Doe, Director at Company.
                                John Doe, Director at Company.
                                John Doe, Director at Company.
                                John Doe, Director at Company.
                                John Doe, Director at Company.
                                John Doe, Director at Company.
                                John Doe, Director at Company.
                                John Doe, Director at Company.
                            </p>
                        </div>
                        <div class="tree-pane tab-pane fade in active" id="B">
                            <p>
                                Lorem ipsum, Founder and Director at Company.
                            </p>
                        </div>
                        <div class="tree-pane tab-pane fade" id="C">
                            <p>
                                John Doe, Director at Company.
                                John Doe, Director at Company.
                                John Doe, Director at Company.
                                John Doe, Director at Company.
                                John Doe, Director at Company.
                            </p>
                        </div>
                        <div class="tree-pane tab-pane fade" id="D">
                            <p>
                                Lorem ipsum, Founder and Director at Company.
                                John Doe, Director at Company.
                                John Doe, Director at Company.
                            </p>
                        </div>
                    </div>
                </div>

                <div class="​col-lg-4 col-md-4 col-sm-4 col-xs-4">
                    <div class="tree-panel panel-container">
                        <ul>
                            <a href="#A" data-toggle="tab">
                                <li>A</li>
                            </a>
                            <a href="#B" data-toggle="tab">
                                <li class="active">B</li>
                            </a>
                            <a href="#C" data-toggle="tab">
                                <li>C</li>
                            </a>
                            <a href="#D" data-toggle="tab">
                                <li>D</li>
                            </a>
                        </ul>
                    </div>
                </div>
            </div>
        </div>
    </div>

J查询:

    $(window).load(function(){
        if (! $('.tree').get(0) ) return;
        $('<div class="tree-title" />').appendTo('.tree-content');

        $('.tree-title').text("Tree").css({
            "position":                "absolute",
            "top":                     "0",
            "left":                    "0",
            "color":                   "#FFFFFF",
            "font-size":               "18px",
            "-webkit-transform":       "rotate(-90deg)",
            "-moz-transform":          "rotate(-90deg)",
            "-o-transform":            "rotate(-90deg)",
            "transform":               "rotate(-90deg)",
            "z-index":                 "600"
        });
    });



    (function($){
        $.fn.tree = function (){
            setTimeout(function()
                {
                    var heightPane = $('.tree-pane.active').css('height');
                    heightPane = parseInt(heightPane);
                    var p = $('.tree-title').position();
                    var h = $('.tree-title').height();
                    var w = $('.tree-title').width();

                    var cal_1 = ((40 - h) / 2) - 1;
                    var cal_2 = (heightPane - w) / 2;

                    var _cal_1 = - ((p.top) - cal_2);
                    var _cal_2 = - ((p.left) - cal_1);


                    $('.tree-title').css({
                        "margin-top": _cal_1,
                        "margin-left": _cal_2
                    });
                }, 200 + 20);
        };
    })(jQuery);

    $(document).ready(function(){
        $('.tree').tree();
        $('.tree-panel a').bind("click",function(){
            $('.tree').tree();
        });
    });

Answer 1

判断一个变量是否未定义，你可以使用

if (typeof myVariable == "undefined")

由于您使用的是 jQuery，因此要验证一个类是否存在(并执行相关操作)，请使用

if ($(".myClass").length == 0) {
    //stuff if class is absent
} else {
    //your current instructions
}

编辑:在您的情况下，如果您不希望在缺少所需类的情况下执行该代码，您可以执行类似 this 的操作