0
私は既存の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>
このコードをページの頭部と身体の両方の部分に配置しようとしました。ページが読み込まれるたびに、アラートが発生しますが、スクロールバーが表示されているときは、スライダ上にノブが1つのみの通常の灰色です。 JSFiddleでは、カラフルなスライダーに3つのノブがあります。
JQueryUIへの参照が不足している可能性があるので、これを私の頭に追加しました。
<script src="http://ajax.microsoft.com/ajax/jquery.ui/1.8.5/jquery-ui.min.js"></script>
これは単に状況を悪化させます。私はそこに持っているとき、私はコンソールでエラーのない空白のページを取得します。私は他に何が必要なのか分からない。私がどこに間違っているのか誰にでも教えてくれますか？
JSFiddleはHereです。
あなたは[mcve]を投稿できますか？ – evolutionxbox