编写以下代码以获得所需的结果：
html 文件：
<div class="container">
<img id="myImg" class="img-fluid img-thumbnail" src="cat.jpg" alt="cat img">
</div>
JS文件：
$(function() {
let i = 0;
$('#myImg').click(function() {
$(this).html(i++);
});
});
但是，控制台显示错误如下：
Uncaught ReferenceError: $ is not defined
at script.js:1
你能帮我解决这个问题并向我解释为什么会发生这种情况吗？我怎么知道点击增量的次数？
单击此处查看我作品的代码笔链接。
取消注释你对jquery文件的链接，即<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>并在jQuery文件之后.js包含你的脚本。您收到错误是因为您的<script src="script.js"></script>在jquery之前。所有使用 jQuery 的 JavaScript 都必须在 jQuery 文件之后。
<!doctype html>
<html lang="en">
<head>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<!-- Bootstrap CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<link rel="stylesheet" href="style.css">
<title>Click Cat | Sofia </title>
</head>
<body>
<div class="container">
<img id="myImg" class="img-fluid img-thumbnail" src="http://www.petsworld.in/blog/wp-content/uploads/2014/09/adorable-cat.jpg" alt="cat img">
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<!-- jQuery first, then Popper.js, then Bootstrap JS -->
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>
<!-- Optional JavaScript -->
<script src="script.js"></script>
<script>
$(function(){
let i=0;
$('#myImg').click(function(){
$(this).html(i++);
console.log(i);
});
});
</script>
</body>
</html>$(document).ready(function(){
var i = 1;
$('#myImg').click(function(){
alert(i++); // here you can use html or whatever you want.
});
});
删除警报并使用您想要的任何内容
看起来你正在尝试在你的javascript代码中使用jQuery，但你可能没有在你的HTML中正确地包含jquery脚本文件。
您可以从 cdn 将其加载到文档的头部，如下所示：
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
</head>
包含 jQuery 脚本后，您可能希望修改 HTML 以拥有一个将保存计数的元素(而不是 img 元素(：
<div class="container">
<span id="click-counter">0</span>
<img id="myImg" class="img-fluid img-thumbnail" src="cat.jpg" alt="cat img">
</div>
然后调整你的 js 代码：
$(function() {
let i = 0;
$('#myImg').click(function() {
i++;
$('#click-counter').text(i);
});
});
这是一个小提琴：
https://jsfiddle.net/2zxmhub4/1/