我在 www.sololearn.com/Codes/中使用 JavaScript 编辑器
当我为 jQuery 添加 $ 符号时，它说 $ 未定义。
如何将 jQuery 添加到我的代码中，使其正常工作，但保持代码像在编辑器中一样分开:一个槽用于 HTML，另一个槽用于 CSS，另一个槽用于 JavaScript。
HTML:
<!DOCTYPE html>
<html>
<head>
<Title>Sum To Coins - Dynamic Programming</Title>
</head>
<body>
<div id="mainScreen">
<p id="instructions">Insert a sum to turn it into coins</p>
<button class='Button' id="btn1">Button</button>
<button class='Button' id="btn2">Button</button>
<button class='Button' id="btn3">Button</button>
<br>
<p id="resultField">The coins are: </p>
<p id="matrixField"> </p>
</div>
<div id="pickCoinsScreen">
<script src="jquery-3.1.1.min.js"></script>
</div>
</body>
CSS:
.Button:active, .active {
background-color:red;
color: white;
}
JavaScript:
$('.Button').click(function(
$(this).toggleClass('active');
e.preventDefault();
});
最佳答案
首先，您的 Javascript 代码几乎没有错误，所以我已经解决了这个问题，并实现了一些使用 jQuery 的“DOMReady”函数的最佳实践。
$(function(){
$('.Button').click(function(){
$(this).toggleClass('active');
});
});
在 <head> 内标签我已经插入了指向 jQuery 的谷歌托管库的链接。 .现在你的 <head>元素包含此代码。
<head>
<Title>Sum To Coins - Dynamic Programming</Title>
<script src="//ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
</head>
旁注:我已经删除了 e.preventdefault()因为在这种情况下没有必要。
我已经在 solo-learn 上对其进行了测试，它似乎可以正常工作。
关于javascript - 如何将 jQuery 添加到 SoloLearn Playground 部分？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/42747586/