Question

我试图在鼠标悬停时突出显示每个单词。我使用node.js并表达js。以下是一个小提琴：https://jsfiddle.net/gsrgfd8e/

  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>

我从localhost获取的页面并没有突出显示示例中的单词。经过一些测试，Javascript似乎运行良好。也许是Jquery？

Answer 1

由您包含的脚本设置的内容类型标题：

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

有问题你会在控制台找到：

MIME类型（＆＃39; text / html＆＃39;）不可执行，并且启用了严格的MIME类型检查。

解决方案：

使用快速静态内容服务并在index.js中添加以下内容

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

现在在节点服务器根目录中创建一个文件夹 public / css ，并将文件https://sites.google.com/site/aryandhaniblogv2/jquery-lettering-0-6-1-min/jQuery.lettering-0.6.1.min.js的内容复制到一个新文件 lettering.js

然后最终用以下内容替换脚本标记：

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

无法让JQuery与Express js一起使用

1 个答案: