JSFiddle代码不工作在我自己的页面 [英] JSFiddle code not working in my own page
问题描述
我有一些在JSFiddle中工作的代码，但我无法运行
HTML
< body style = background-color：＃000000>
< form oninput =amount.value = range.valuestyle =color：＃1ec2c5;>
< output name =amountfor =range> 2< / output>< a> KM< / a>
< input type =rangename =rangemin =1max =9step =1value =2id =test>
< / body>
CSS
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;}
JavaScript
$（'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 / JS
我已尝试替换 $（this）与元素的id，但仍没有运气。
如果我把代码放在HTML / JS in head）
问题是你把代码放在 ; head> ，因此它在输入元素被解析之前运行，因此 $（'input [type =range]'）
如果你看看JSFiddle中的Frameworks& Extensions选项，你会注意到它把你的JS代码放在 onload 处理程序，因此您的代码不会运行，直到整个页面加载。对于代码在你自己的网页上表现相同的方式，你需要将它包装在你自己的 onload 处理程序，或者 - 因为你使用jQuery - 将其包装在文档准备处理程序中：
$（document）.ready（function（）{
//你的代码在这里
}）;
或 short form 是这样的：
$（function（）{
// your code here
}）;
或者在页面末尾包含脚本，以便在它尝试操作的元素已被解析。
I have some code that is working in JSFiddle but which I can't get to run in my own page.
HTML
<body style="background-color: #000000">
<form oninput="amount.value=range.value" style="color:#1ec2c5;">
<output name="amount" for="range">2</output><a> KM</a>
<input type="range" name="range" min="1" max="9" step="1" value="2" id="test">
</body>
CSS
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;}
JavaScript
$('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)'
+ ')'
);
});
If I take the code and put in the HTML/JS (linked in head)/CSS (linked in head) files, the CSS works but the JavaScript does not.
I've tried replacing $(this) with the id of the element but still no luck.
"If I take the code and put in the HTML/JS (linked in head)"
The problem is that you've put your code in the <head>, so it runs before the input elements have been parsed and so then $('input[type="range"]') finds no elements.
If you look at the "Frameworks & Extensions" options in JSFiddle, you'll notice that it puts your JS code in an onload handler by default, so your code doesn't run until the whole page has loaded. For the code to behave the same way on your own web page you'd need to wrap it in an onload handler of your own, or - since you're using jQuery - wrap it in a document ready handler:
$(document).ready(function() {
// your code here
});
Or the short form is like this:
$(function() {
// your code here
});
Or include your script at the end of the page, so that it runs after the elements it tries to manipulate have been parsed.
这篇关于JSFiddle代码不工作在我自己的页面的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
