这是下面的jquery代码:
$('div').on('click', function() {
$(this).toggleClass('show-description');
});
我想将其转换为JavaScript,因为收到以下错误消息:
“ $是未定义的”
当我将jquery代码放在codepen.io的JavaScript部分中时。
jquery代码产生错误是有原因的吗?我怎样才能解决这个问题? 如果无法修复,如何将Jquery代码转换为JavaScript?
单击div时,我试图在所有div上使用toggleClass。
以下是指向密码笔的链接,以供参考:https://codepen.io/sophiesucode/pen/jOExXKw
答案 0 :(得分:1)
</body>
之上,Here是您的演示 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
document.querySelector('div').onclick = function(){
this.classList.toggle("show-description");
};
答案 1 :(得分:1)
$('div').on('click', function() {
$(this).toggleClass('show-description');
});
可以由普通javascript表示为:
var divs = document.querySelectorAll('div'); //Get a list of all div elements
for (const div of divs){ //Loops through every div element
div.onclick = function(e) { //Adds the on click function to each
e.currentTarget.classList.toggle('show-description'); //Defines the function as toggling a class on the element of the click function
}
}
jQuery代码实际上是javascript。 jQuery是为javascript构建的库。要解决错误“ $ is undefined”,您必须将jquery添加到您的网页中,或将其导入脚本中。
有wonderful article on W3 Schools讲授了多种将jquery添加到您的网页的方法。
答案 2 :(得分:0)
您的代码无效,因为您将脚本路径链接为相对路径。
更改此
<script src="/assets/jquery.js"></script>
变成这个
<script src="https://code.jquery.com/jquery-3.4.1.min.js"></script>
另一种方法是使用Codepen中的“设置”菜单链接jquery文件。
设置> Javascript>,然后在CDNsearch栏中搜索jquery