如何使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中的代碼適應瀏覽器的工作？

回答

相關問題