2017-05-10 7 views
0

Ich versuche, jedes Wort auf Mouseover hervorzuheben. Ich benutze node.js und express js. Hier ist eine Geige als Beispiel: https://jsfiddle.net/gsrgfd8e/Kann JQuery nicht mit Express js arbeiten

var express = require('express'); 

    var app = express(); 
    app.use(express.static(__dirname + '/public')); 
    app.set('view engine', 'ejs'); 

    //home 
    app.get('/', function(req, res) { 
    res.render('home'); 
    }); 

    // not found 
    app.get('*', function(req, res){ 
    res.send('page not found'); 
    }); 

    app.listen(3000); 

home.ejs

<!DOCTYPE html> 
    <html> 
    <head> 
    <meta http-equiv="content-type" content="text/html; charset=UTF-8"> 
    <meta name="robots" content="noindex, nofollow"> 
    <meta name="googlebot" content="noindex, nofollow"> 
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> 
     <script type="text/javascript" src="https://sites.google.com/site/aryandhaniblogv2/jquery-lettering-0-6-1-min/jQuery.lettering-0.6.1.min.js"></script> 
     <script type='text/javascript'>//<![CDATA[ 
     window.onload=function(){ 
     $(".word_split").lettering('words'); 
     }//]]> 
     </script> 

    <style type="text/css"> 
     #text{ 
     width:60%; 
     margin: auto; 
     text-align:justify; 
     font-size:18pt; 
     } 
     .word_split span:hover { 
     background-color: #20B2AA; 
     color:white; 
    } 
    </style> 

    <title></title> 

    </head> 

    <body> 
    <div id="text"> 
     <p class="word_split">Peki nedir bu Bulletproof Coffee? Efendim adından da anlayabileceğimiz gibi cumhurbaşkanının bilmemkaçyüzbindolar değerindeki aracı gibi kurşungeçirmez özelliği olduğuna inanılan, Batman’ e, Hulk’ a, Flash’ e, Black Widow’ a, Jon Snow’a, Kenan Komutan’a, Şebnem Ferah’a ve hatta ne istiyorsanız ona dönüşebileceğinizi vaat ettiği rivayet edilen bir kahve çeşidi. Bugüne dek birçok farklı kahve denemiş, hepsinden ağzınıza size düşen payı almış olmanız muhtemel fakat bu tarife kulak verseniz pek de kötü etmiş olmazsınız gibi geliyor.</p> 
     <p class="word_split">Size ölümsüzlük iksirinin bulunduğu müjdesini vermek isterdik lakin ne böyle bir iksir bulundu ne de buna gerek var. Size verdiği tek şey bünyeden bünyeye farklılık gösteren enerji etkisidir. Enerji dediysek öyle hemen içer içmez Galya’lı Asterix gibi Romalılara saldırmaya kalkmayın. Çünkü etkisi uzun zamanlı kullanımda kendini gösterecek bir kahve çeşididir. Tabi Obelix gibi kazana düşmediyseniz.</p> 
     <p class="word_split">Vakit kaybetmeden Bulletproof Coffee tarifimize geçerek kendimizi kurşungeçirmez yapalım.</p> 

    </div> 

    </body> 

    </html> 

Die Seite, die ich von localhost erhalten nicht die Wörter wie im Beispiel markieren. Javascript scheint nach einigen Tests gut zu funktionieren. Vielleicht ist es Jquery?

+0

Ihre App ist fast gar nicht auf Express angewiesen. Ich sehe keinen Grund dafür, mit dem Problem in Verbindung zu stehen. Öffnen Sie die Browserkonsole. (F12) –

+0

@KevinB es tut. Es ist ein Inhaltstypproblem. – WilomGfx

+0

Ah, ich dachte nicht an die Möglichkeit, dass die dritte Partei dieses Problem haben würde. –

Antwort

2

Die Header für Inhaltstyp von Skript festgelegt Sie enthalten:

<script type="text/javascript" src="https://sites.google.com/site/aryandhaniblogv2/jquery-lettering-0-6-1-min/jQuery.lettering-0.6.1.min.js"></script> 

wurden mit Ausgabe, die Sie in der Konsole finden:

MIME-Typ ('text/html') ist nicht ausführbar, und Die strenge MIME-Typüberprüfung ist aktiviert.

Lösung:

Verwendung express statische Inhalte dienen und fügen Sie in index.js folgenden

app.use(express.static(path.join(__dirname, 'public'))); 

jetzt einen Ordner public/css in Ihrem Knoten Server root und kopieren Inhalt der Datei erstellen https://sites.google.com/site/aryandhaniblogv2/jquery-lettering-0-6-1-min/jQuery.lettering-0.6.1.min.js in eine neue Datei latching.js

Und dann endlich ersetzen Skript-Tag mit dieser:

<script type="text/javascript" src="css/lettering.js"></script> 
+0

Ich denke, ich soll hinzufügen, auch eine 'Pfad' Variable zu erstellen? Was sollte es genau sein? Ansonsten bekomme ich das: ReferenceError: Pfad ist nicht definiert bei Object. (/home/mica/Documents/Web/app.js:5:24) bei Module._compile (module.js: 409: 26) bei Object.Module._extensions..js (module.js: 416: 10) bei Module.load (module.js: 343: 32) bei Function.Module._load (module.js: 300: 12) bei Function.Module.runMain (module.js: 441: 10) bei startup (node.js: 139: 18) bei node.js: 990: 3 –

+0

Sie können einfach var path = require ('Pfad'). Es ist ein Kern-Knoten-Modul, also keine Notwendigkeit, npm zu installieren und so weiter. Es ist direkt verfügbar über require statement –

+0

Danke für die Hilfe! –