时间戳

首页 > 解决方案 > JS & jQuery 未加载到 HTML (Express)

javascript - JS & jQuery 未加载到 HTML (Express)

问题描述

我正在尝试将静态 JS 和 jQuery 代码加载到 express 中的静态 html 文件中，这对我来说很新。我已经设置了应用程序，可以在 localhost:3000 访问它，并根据需要加载 HTML 和 CSS，但 jQuery 和 JS 不是。

HTML头：

<head>
<meta charset="utf-8">
<title>Intellectual Principles</title>
<meta name="description" content="Intellectual Principles">
<meta name="author" content="Ronnlidd">
<link rel="stylesheet" type="text/css" href="/stylesheets/style.css">
<script src="../node_modules/jquery/dist/jquery.min.js"></script>
<script type="text/javascript" src="/javascripts/BoostOdds.js"></script>
<!-- COMMENTS FOR UNDERSTANDING THIS FILE -->
<!-- class="p" is default principle box, class="pv2" is a second version of a principle box, suitable for grid-items, often overwritten withs styles for specifici levels of principles.-->
</head>

文件夹结构： 在新标签中打开 img。

应用程序.js

    var express = require('express');
var path = require('path');
var cookieParser = require('cookie-parser');
var logger = require('morgan');

var indexRouter = require('./routes/index');
var usersRouter = require('./routes/users');

var app = express();

app.use(logger('dev'));
app.use(express.json());
app.use(express.urlencoded({ extended: false }));
app.use(cookieParser());

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


app.use('/', indexRouter);
app.use('/users', usersRouter);

module.exports = app;

节点控制台：

PS C:\CodingProjects\Principles> npm start

> principles@0.0.0 start C:\CodingProjects\Principles
> node ./bin/www

GET / 304 7.392 ms - -
GET /stylesheets/style.css 304 1.311 ms - -
GET /node_modules/jquery/dist/jquery.min.js 404 4.623 ms - 177
GET /javascripts/BoostOdds.js 304 5.782 ms - -

BoostOdds.js

function oneElmToggle(elm) {
    const display = elm.nextSibling.style.display;
    if (display === "none" || display === "") {
      elm.nextSibling.style.display = "block";
    }
    else {
      elm.nextSibling.style.display = "none";
    }
  }
  window.onload = function () {
    $("#toggleAllElms").click(function () {
      $(".toggleAcronym").toggle('fast');
    });
  };

对应的 HTML（在 index.html 中）：

<div id="p1136Acronyms"> <!-- First jQuery/JS -->
    <button onclick="oneElmToggle(this)">RWE</button>
    <p class="toggleAcronym">Real World Example</p> 

    <button onclick="oneElmToggle(this)">CRUD</button>
    <p class="toggleAcronym">Create, Read, Update, Delete</p>

    <button onclick="oneElmToggle(this)">CNS</button>
    <p class="toggleAcronym">Central Nervous System</p>

    <button onclick="oneElmToggle(this)">MPS</button>
    <p class="toggleAcronym">Muscle Protein Synthesis</p>

    <button onclick="oneElmToggle(this)">I.e.</button>
    <p class="toggleAcronym">In essence</p>

    <button onclick="oneElmToggle(this)">ALAP</button>
    <p class="toggleAcronym">As Long As Possible</p>

    <button onclick="oneElmToggle(this)">AMAP</button>
    <p class="toggleAcronym">As Much As Possible</p>

    <button onclick="oneElmToggle(this)">CoC</button>
    <p class="toggleAcronym">Contents of Consciousness</p>

    <button onclick="oneElmToggle(this)">RR(P)(F)-R</button>
    <p class="toggleAcronym">Risk Reward (Probability)(Fragility) - Ratio</p>

    <button onclick="oneElmToggle(this)">AoL</button>
    <p class="toggleAcronym">Area of Life (My arbitrarily created 4 AoL are: Intellectual, Physical, Relationships & Intellectual)</p>

    <button onclick="oneElmToggle(this)">MBS</button>
    <p class="toggleAcronym">Mind Body & Spirit</p> 

    <button onclick="oneElmToggle(this)">QoC</button>
    <p class="toggleAcronym">Quality of Consciousness</p>

    <button onclick="oneElmToggle(this)">PFC</button>
    <p class="toggleAcronym">Pre-Frontal Cortex</p>

    <button onclick="oneElmToggle(this)">SRV</button>
    <p class="toggleAcronym">Survival & Reproduction Value. //(Often used to describe factors with directional effect on this.)</p>

    <button onclick="oneElmToggle(this)">P/T-R</button>
    <p class="toggleAcronym">Practice/Theory-Ratio</p>

    <button id="toggleAllElms"><h2>Toggle All</h2></button>
    <p class="toggleAcronym">This button toggles all acronym explanations to Show/Hide</p>
</div>

对我来说奇怪的是 JS 似乎正在加载，但是我之前测试过的代码的功能没有加载。jQuery 似乎也完全丢失了，尽管我已经检查了几次以查看它确实位于Principles/node_modules/jquery/dist/jquery.min.js

提前感谢您的帮助，请询问我遗漏的任何您需要的信息。

标签： javascriptjqueryhtmlexpressnavigation

解决方案

推荐阅读