如何调整 JSFiddle 中的代码以在浏览器中工作？

Question

我修改了现有的 JSFiddle 并将其分叉。我正在尝试将此代码转换为 MVC 应用程序中的 .cshtml。我读过类似的问题，这表明问题的发生是因为人们没有使用 Onload 或 $document.ready()。我不相信我的情况会是这样。

我的文档头部是这样的：

    <link rel="stylesheet" href="https://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.css">
    <link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/themes/start/jquery-ui.css" />
    <link rel="stylesheet" href="~/CSS/slider.css" />

    <script src="https://code.jquery.com/jquery-1.11.3.min.js"></script>
    <script src="https://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js"></script>
    @*<script src="http://ajax.microsoft.com/ajax/jquery.ui/1.8.5/jquery-ui.min.js"></script>*@

CSS 是一个外部文件，看起来像这样：

.slide {
    margin-top: 20px;
    margin-left: 20px;
    width: 400px;
    background: red;
}
.slide-back {
    position:absolute;
    height:100%;
 }

$document.ready() 的Javascript代码如下。

    <script>
    $(document).ready(function () {


        var doUpdate = function (event, ui) {
            alert('doUpdate1'); //This fires. 

            $('#slide1 .slide-back').remove();
            $($('#slide1 a').get().reverse()).each(function (i) {
                var bg = '#fff';
                if (i == 1) {
                    bg = '#00f';
                } else if (i == 2) {
                    bg = '#0f0';
                } else if (i == 3) {
                    bg = '#f00';
                } else if (i == 4) {
                    bg = '#0ff';
                }

                $('#slide1').append($('<div></div>').addClass('slide-back').width($(this).offset().left - 5).css('background', bg));

            });
        };

        $('#slide1').slider({
            slide: doUpdate,
            change: doUpdate,
            min: 0,
            max: 1000,
            values: [200, 500, 800]
        });

        doUpdate();
    });
</script>

我试过将这段代码放在页面的头部和正文部分。每次加载页面时，都会触发警报，但是当滚动条出现时，它是一种普通的灰色，滑块上只有一个旋钮。在 JSFiddle 中，彩色滑块上有三个旋钮。

我想我可能遗漏了对 JQueryUI 的引用，所以我将其添加到我的脑海中。

<script src="http://ajax.microsoft.com/ajax/jquery.ui/1.8.5/jquery-ui.min.js"></script>

这只会让事情变得更糟。当我在那里时，我得到一个空白页面，控制台中没有错误。我不知道我还需要什么。谁能告诉我哪里出错了？

可以找到 JSFiddle Here。

Answer 1

在运行启用 fiddle 之前，打开您的开发者工具 (F12) 并切换到网络选项卡...当您运行 fiddle 时，一个一堆文件将被下载。您可能希望将这些文件添加到您的 HTML。至少其中一些。

Answer 2

JSFiddle 没有什么特别之处；如果你没有得到相同的结果，这意味着有些东西是不同的。这通常是由于各种插件的不同版本之间不兼容造成的。您可以通过检查 F12 Developer Tools.

的 'Network' 选项卡来找出他们使用的特定版本的插件

例如，JSFiddle 使用 jQuery 的 1.4.4 版本：

http://code.jquery.com/jquery-1.4.4.min.js

而您使用的是 1.11.3（除了加载 jQuery Mobile 1.4.5）：

https://code.jquery.com/jquery-1.11.3.min.js
https://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js

JSFiddle 确实也使用 jQuery UI
（即 1.8.5，与您的版本相同，尽管来源不同）：

http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.5/jquery-ui.js

删除您的 jQuery 移动参考，并切换到 jQuery 1.4.4 可能会解决您的问题。

希望对您有所帮助！ :)

如何调整 JSFiddle 中的代码以在浏览器中工作？

How can I adapt code from a JSFiddle to work in a browser?

javascript

jquery

jsfiddle