代码之家  ›  专栏  ›  技术社区  ›  Dave

如何调整JSFIDLE中的代码以在浏览器中工作?

  •  0
  • Dave  · 技术社区  · 7 年前

    我修改了现有的JSFiddle并将其分叉。我正在尝试将此代码翻译为。MVC应用程序中的cshtml。我读过类似的问题,这表明问题的发生是因为人们没有使用Onload或$document。就绪()。我认为在我的情况下不是这样的。

    我的文档标题如下所示:

        <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的Javascript代码。ready()如下所示。

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

    我想我可能错过了对JQueryUI的引用,所以我把这个添加到了我的脑海中。

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

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

    可以找到JSFiddle Here

    2 回复  |  直到 7 年前
        1
  •  2
  •   Obsidian Age    7 年前

    JSFiddle没有什么特别之处;如果你没有得到相同的结果,这意味着有些东西是不同的。这通常是由于各种插件的不同版本之间不兼容造成的。您可以通过查看的“网络”选项卡来了解他们正在使用哪些特定版本的插件 F12 Developer Tools

    例如,JSFIDLE使用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
    


    (即1.8.5,与您的版本相同,但来源不同):

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

    删除jQuery mobile引用并切换到jQuery 1.4.4可能会解决您的问题。

        2
  •  0
  •   theGleep    7 年前

    在运行fiddle之前,打开开发者工具(F12)并切换到网络选项卡。。。当你运行小提琴时,会下载一堆文件。您可能希望将这些文件添加到HTML中。至少其中一些。