ホームページ >ウェブフロントエンド >CSSチュートリアル >JSFiddle から外部ページに移動すると、JavaScript レンジ スライダーが機能しないのはなぜですか?
JSFiddle から外部ページに移動すると、JavaScript レンジ スライダーが機能しないのはなぜですか?
- DDDオリジナル
- 2024-12-16 18:21:18337ブラウズ
JSFiddle コードが外部ページでつまずく
機能コードを JSFiddle から外部ページに移行しようとすると、JavaScript コンポーネントが機能しなくなる予期しない動作が発生します。 .
コードのセットアップ
ユーザーは次の HTML を提供しました。 CSS、および JavaScript コード:
<body>
input[type="range"]{
-webkit-appearance: none;
-moz-apperance: none;
border-radius: 6px;
width: 225px;
height: 6px;
border: 2px solid #eceef1;
outline:none;
background-image: -webkit-gradient(
linear,
left top,
right top,
color-stop(0.15, #eceef1),
color-stop(0.15, #0c0d17)
); }
input[type='range']::-webkit-slider-thumb {
-webkit-appearance: none !important;
background-color: #1ec2c5;
border: 3px solid #000000;
height: 25px;
width: 25px;
border-radius: 20px;}$('input[type="range"]').change(function () {
var val = ($(this).val() - $(this).attr('min')) / ($(this).attr('max') - $(this).attr('min'));
$(this).css('background-image',
'-webkit-gradient(linear, left top, right top, '
+ 'color-stop(' + val + ', #eceef1), '
+ 'color-stop(' + val + ', #0c0d17)'
+ ')'
);
});問題の根本
コードを外部ページの HTML、JavaScript、CSS ファイルに配置したにもかかわらず、JavaScript 部分実行に失敗しました。
重要な洞察は、JSFiddle がユーザーの JavaScript コードを配置するという事実から得られました。 onload ハンドラー内で。したがって、コードはページ全体がロードされた後にのみ実行されます。ただし、外部ページでは JavaScript が
に配置されており、入力要素が解析される前に実行されます。解決策
この問題を修正するには、ユーザーは次のことを行うことができます。次の 3 つの解決策のいずれかを採用します。
- コードを onload 内に囲むか、できればドキュメントレディ ハンドラー内に含めます。例:
$(document).ready(function() {
// your code here
});- ドキュメント準備完了ハンドラーの短縮形を利用します:
$(function() {
// your code here
});- JavaScript コードをページの最後に追加し、コードの前に要素を解析できるようにします。実行します。
以上がJSFiddle から外部ページに移動すると、JavaScript レンジ スライダーが機能しないのはなぜですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。
声明：
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。