Javascript JSFIDLE代码在我自己的页面中不起作用

我有一些，但我无法在自己的页面上运行

HTML

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（linked in head）/CSS（linked in head）文件中，CSS可以工作，但是JavaScript不能

---

我尝试用元素的id替换

$（this）

，但仍然没有成功

您是否已确保在标题中包含jQuery库？ 对于所有类型的库，请查看谷歌的开发者网站。 这是您正在寻找的jQuery库-请确保将其放在JS文件之前

 <script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>

^那应该在你的标题中

“如果我将代码放入HTML/JS（链接在头部）”

问题是您已将代码放入

中，因此它在分析输入元素之前运行，因此

$（'input[type=“range”]”）

找不到任何元素

如果您查看JSFiddle中的“Frameworks&Extensions”选项，您会注意到默认情况下，它会将您的JS代码放入

onload

处理程序中，因此在加载整个页面之前，您的代码不会运行。要使代码在您自己的网页上以相同的方式运行，您需要将其包装在您自己的

onload

处理程序中，或者-因为您正在使用jQuery-将其包装在：

或者是这样的：

$(function() {
    // your code here
});

或者在页面的末尾包含脚本，以便它在试图操作的元素被解析后运行

在您的小提琴编辑器中，单击javaScript+No库（纯JS）

下拉菜单将为您提供选项

第三个选项是

load Type-

单击它并选择No

wrap-bottom of

运行你的代码

享受吧

---

您是否像

那样将jquery库添加到html中？是的，先生，脚本添加到了my Hey中，谢谢您的回答。是的，我的呐喊中包含了剧本，忽略了你说的话。我误解了。嗨，谢谢你的回答。当然，javascript代码位于另一个文件中，该文件在中链接。我已经试过你的建议了，它奏效了！。谢谢你，先生！解释得很好！你真是个天才。使我免于不必要地把头撞在桌子上

 <script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>

$(document).ready(function() {
    // your code here
});

$(function() {
    // your code here
});