☰

WebStorm führt jQuery im Chrome-Popup nicht aus

tag-icon • tag-icon google-chrome html webstorm jquery
WebStorm führt jQuery im Chrome-Popup nicht aus

Ich verwende WebStorm zum Codieren einer Website und führe einigen Code aus, den ich auf Overflow gefunden habe, um zu sehen, ob er für meinen Zweck funktioniert.

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();

})();

Dies läuft perfekt auf dem jsfiddle, auf dem es ausgeführt wurde, aber nachdem ich es in WebStorm importiert und in Chrome ausgeführt habe, funktionierte es nicht. Irgendwelche Tipps?

Antwort1

Sie versuchen, Elemente abzurufen, bevor sie vorhanden sind. Daher quotesbeträgt die Array-Größe 0. Versuchen Sie, Ihr <script>Tag nach unten zu verschieben, etwa:

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

verwandte Informationen