☰

WebStorm이 Chrome 팝업에서 jQuery를 실행하지 않습니다.

tag-icon • tag-icon google-chrome html webstorm jquery
WebStorm이 Chrome 팝업에서 jQuery를 실행하지 않습니다.

저는 WebStorm을 사용하여 웹사이트를 코딩하고 있으며 Overflow에서 찾은 일부 코드를 실행하여 제 목적에 맞게 작동하는지 확인하고 있습니다.

HTML

<h2 class="quotes">first quote</h2>
<h2 class="quotes">second quote</h2>

CSS

.quotes {display: none;}

자바스크립트

(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

요소가 존재하기 전에 가져오려고 하므로 배열 크기는 0입니다 . 다음과 같이 태그를 맨 아래로 quotes이동해 보세요 .<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>

관련 정보