如何使JSFiddle中的代码适应浏览器的工作？

我修改了一个现有的JSFiddle并将其分开。我正在尝试将此代码翻译成MVC应用程序中的.cshtml。我读过类似这样的问题，这表明问题正在发生，因为人们没有使用Onload或$ document.ready（）。我不相信我的情况就是这样。如何使JSFiddle中的代码适应浏览器的工作？

我的文档的头部看起来是这样的：

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

来源

2017-10-18 Dave

你可以发布[mcve]吗？ – evolutionxbox

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

例如，使用的jsfiddle 1.4.4版的jQuery：

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

而使用1.11.3（在additon来加载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可能会解决您的问题。

希望这会有所帮助！ :)

来源

2017-10-18 21:10:01

在运行小提琴之前，请打开您的开发人员工具（F12）并切换到网络选项卡...当您运行小提琴时，会下载一堆文件。您可能需要将这些文件添加到您的HTML。至少其中一些。

来源

2017-10-18 21:05:03 theGleep

如何使JSFiddle中的代码适应浏览器的工作？

回答

相关问题