![WebStorm 在 Chrome 弹出窗口中未运行 jQuery](https://linux22.com/image/1605172/WebStorm%20%E5%9C%A8%20Chrome%20%E5%BC%B9%E5%87%BA%E7%AA%97%E5%8F%A3%E4%B8%AD%E6%9C%AA%E8%BF%90%E8%A1%8C%20jQuery.png)
我正在使用 WebStorm 编写网站代码并运行我在 Overflow 上找到的一些代码,看看它是否能够满足我的目的。
HTML
<h2 class="quotes">first quote</h2>
<h2 class="quotes">second quote</h2>
CSS
.quotes {display: none;}
JavaScript
(function() {
var quotes = $(".quotes");
var quoteIndex = -1;
function showNextQuote() {
++quoteIndex;
quotes.eq(quoteIndex % quotes.length)
.fadeIn(2000)
.delay(2000)
.fadeOut(2000, showNextQuote);
}
showNextQuote();
})();
这在运行它的 jsfiddle 上完美运行,但是当我将它导入 WebStorm 并在 Chrome 中运行它时,它不起作用。有什么建议吗?
答案1
您尝试在元素存在之前获取它们,因此quotes
数组大小为 0。尝试将<script>
标签移动到底部,例如:
<!DOCTYPE html>
<html lang="en">
<head>
<link href="https://fonts.googleapis.com/css?family=Fugaz+One&display=swap" rel="stylesheet">
<meta charset="UTF-8">
<title>Purple Reign</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<link rel="stylesheet" href="pvphs.css">
</head>
<body><h2 class="quotes">first quote</h2>
<h2 class="quotes">second quote</h2>
<script src="pvphs.js"></script>
</body>
</html>