我有一些可以在JSFiddle中运行的代码,但是无法在自己的页面中运行。
的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)' + ')' ); });
如果我将代码放入HTML / JS(以链接形式)/ CSS(以链接形式)文件中,则CSS可以工作,但JavaScript不能。
我尝试用$(this)元素的ID 代替,但还是没有运气。
$(this)
“如果我接受代码并放入HTML / JS(链接在头部)”
问题是您已将代码放在中<head>,因此它在解析输入元素之前运行,因此$('input[type="range"]')找不到任何元素。
<head>
$('input[type="range"]')
如果您查看JSFiddle中的“ Frameworks&Extensions”选项,则会注意到它onload默认将JS代码放入处理程序中,因此您的代码要等到整个页面加载后才能运行。为了使代码在您自己的网页上具有相同的行为,您需要将其包装在onload您自己的处理程序中,或者- 由于您使用的是jQuery-将其包装在可用于文档的处理程序中:
onload
$(document).ready(function() { // your code here });
或简短的形式是这样的:
$(function() { // your code here });
或在页面末尾包含您的脚本,以使其在解析要操纵的元素 之后 运行。