Question

我有一个奇怪的问题。奇怪我想只是在我对底层机制没有直觉的意义上，我在Chrome Developer Tools调试器中尝试了一切。以下是通过打开

从我桌面上的文件执行它时的代码片段

    jQuery(document).ready(
        function () {
            Slider.initModule(jQuery('#slider'));
        }
    );

我像往常一样导入jQuery：

<script type="text/javascript" src="http://code.jquery.com/jquery-2.0.3.min.js"></script>

这是完整的页面，我很难过，这应该是我从Manning的“单页Web应用程序”获得的聊天滑块的一个简单示例。

<!DOCTYPE html>
<html>
<head>
<title>Slider</title>
<style type="text/css">
    body {
        width: 100%;
        height: 100%;
        overflow: hidden;
        background-color: #777;
    }
    #slider {
        position: absolute;
        top: 8px;
        left: 8px;
        bottom: 8px;
        right: 8px;
        border-radius: 8px 8px 0 8px;
        background-color: #fff;
    }
    .slider {
        position: absolute;
        bottom: 0;
        right: 2px;
        width: 300px;
        height: 16px;
        cursor: pointer;
        border-radius: 8px 0 0 0;
        background-color: #f00;
    }
</style>
<script type="text/javascript" src="http://code.jquery.com/jquery-2.0.3.min.js"></script>
<script type="text/javascript">
    var Slider = (function () {
        var configMap = {
            extendedHeight: 434,
            extendedTitle: 'Click to retract',
            retractedHeight: 16,
            retractedTitle: 'Click to expand',
            templateHtml: '<div class="slider"></div>'
        }, $slider, toggleSlider, onClickSlider, initModule;
        toggleSlider = function () {
            var sliderHeight = $slider.height();
            if(sliderHeight === configMap.retractedHeight) {
                $slider.animate({height: configMap.extendedHeight})
                        .attr('title', configMap.extendedTitle);
                return true;
            } else if(sliderHeight === configMap.extendedHeight) {
                $slider.animate({height: configMap.retractedHeight})
                        .attr('title', configMap.retractedTitle);
                return true;
            }
            return false;
        };
        onClickSlider = function (event) {
            toggleSlider();
            return false;
        };
        initModule = function ($container) {
            $container.html(configMap.templateHtml);
            $slider = $container.find('.slider');
            $slider.attr('title', configMap.retractedTitle)
                    .click(onClickSlider);
            return true;
        };
        return {initModule: initModule};
    })(jQuery);
    jQuery(document).ready(
            function () {
                Slider.initModule(jQuery('#slider'));
            }
    );
</script>

</head>
<body>
<div id="slider"></div>
</body>
</html>

当上述html作为文件提供给Chrome时，滑块是如何工作的：/// uri，但是当在localhost上的服务器上提供时，它是怎么回事？

这是一个有趣的更新。

我在toggleSlider函数中添加了警告，像素与css不同！

alert("HERE! " + sliderHeight);

我有15，但是当我保存源并打开文件时，我得到16！哇！那是怎么回事？这就是为什么滑块不能通过localhost打开我。

Answer 1

它接缝为我工作，检查JsFiddle。

除非下面的代码是打算在加载时打开滑块？

jQuery(document).ready(
        function () {
            Slider.initModule(jQuery('#slider'));
        }
);

另请注意，如果您的PC日期和时间错误，JQuery将无法在本地运行。

Answer 2

尝试创建另一个脚本，仅用于加载

<script type="text/javascript">
var Slider = (function () {
    var configMap = {
        extendedHeight: 434,
        extendedTitle: 'Click to retract',
        retractedHeight: 16,
        retractedTitle: 'Click to expand',
        templateHtml: '<div class="slider"></div>'
    }, $slider, toggleSlider, onClickSlider, initModule;
    toggleSlider = function () {
        var sliderHeight = $slider.height();
        if(sliderHeight === configMap.retractedHeight) {
            $slider.animate({height: configMap.extendedHeight})
                    .attr('title', configMap.extendedTitle);
            return true;
        } else if(sliderHeight === configMap.extendedHeight) {
            $slider.animate({height: configMap.retractedHeight})
                    .attr('title', configMap.retractedTitle);
            return true;
        }
        return false;
    };
    onClickSlider = function (event) {
        toggleSlider();
        return false;
    };
    initModule = function ($container) {
        $container.html(configMap.templateHtml);
        $slider = $container.find('.slider');
        $slider.attr('title', configMap.retractedTitle)
                .click(onClickSlider);
        return true;
    };
    return {initModule: initModule};
})(jQuery);
</script>

然后用这个创建另一个：

<script>
jQuery(document).ready(
        function () {
            Slider.initModule(jQuery('#slider'));
        }
);
</script>

由于某些原因，我有时经历过制作脚本并在同一个脚本上调用它时，它不起作用。但是当我在一个单独的脚本上调用它时，它确实神奇地工作。

Answer 3

将jquery的版本更改为1.9时是否有效？

JQuery（文档）.ready不在页面上进行评估，但在文件中进行评估

3 个答案: