☰

WebStorm が Chrome ポップアップで jQuery を実行しない

tag-icon • tag-icon google-chrome html webstorm jquery
WebStorm が Chrome ポップアップで jQuery を実行しない

私は WebStorm を使用して Web サイトのコーディングを行っており、Overflow で見つけたコードを実行して、目的どおりに動作するかどうかを確認しています。

html

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

CS

.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>

関連情報