1

I have a strange issue. Strange I suppose only in the sense that I have no intuition about the underlying mechanism, and I tried everything I could in the Chrome Developer Tools debugger. Here is the code snippet that works when I execute it from a file on my desktop by opening in 

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

I'm importing jQuery as usual:

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

Here is the complete page, I am stumped, this should just be a simple example of a chat slider that I got from "Single Page Web Applications" on Manning. 

<!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>

How can it be the slider works when the above html is served to Chrome as a file:/// uri, but not when served over a server on localhost, how can this be?

Here is an interesting update.

I added an alert to the toggleSlider function, and the pixels were different than the css!

alert("HERE! " + sliderHeight);

I got 15, but when I save the source and open the file, I get 16! Whoa! Whats going on there? thats why the slider is not opening for me over localhost.

4

3 回答 3

0

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

于 2013-10-29T16:14:41.763 回答
0

它似乎对我有用，检查JsFiddle。

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

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

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

于 2013-10-29T16:09:44.247 回答
0

尝试为这样的加载创建另一个脚本

<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>

出于某种原因，有时当我完成一个脚本并在同一个脚本上调用它时，它会不起作用。但是当我在一个单独的脚本上调用它时，它确实神奇地起作用。

于 2013-10-29T16:13:49.947 回答