JSFiddle代码不能在我自己的页面中工作
我有一些在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不能。
我试图用元素的idreplace$(this) ，但仍然没有运气。
“如果我把代码放在HTML / JS（链接在头）”
问题是你把代码放在<head> ，所以它在input元素被parsing之前运行，所以$('input[type="range"]')找不到任何元素。
如果您查看JSFiddle中的“框架和扩展”选项，您会注意到它默认将您的JS代码放入onload处理程序中，所以您的代码在整个页面加载之前不会运行。 为了使代码在你自己的网页上以相同的方式运行，你需要将它包装在你自己的onload处理程序中，或者 – 因为你使用的是jQuery – 将它包装在一个文档就绪处理程序中 ：
$(document).ready(function() { // your code here });
或者简写如下：
$(function() { // your code here });
或者将脚本包含在页面末尾，以便在尝试操作的元素已经被parsing之后运行。
你确定你已经在你的头文件中包含jQuery库吗？ 对于各种图书馆，请查看Google的开发者网站。 https://developers.google.com/speed/libraries/这里是你正在寻找的jQuery库; – 确保你放在你的JS文件之前。
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
^这应该在你的头。 ;）
- 在Google Chrome中进行debugging时，是否可以更改javascriptvariables值？
- 渐进式Web应用程序与本机应用程序相比具有哪些function，反之亦然，Android上
- Google Chrome开发人员工具 – 禁用黑色模拟选项标尺
- 运行tabs.executeScript时未检查runtime.lastError？
- 如何findJS内存泄漏？
- Chrome DOM断点不断启用
- 您可以通过脚本确定Chrome是否处于隐身模式吗？
- 如何检查Chromedebugging器中的JavaScript函数返回值？
- 如何在Visual Studio中debugging时强制Chrome浏览器重新加载.css文件？
