如何在我的 Node.js EJS 模板中使用 jquery？答案

【问题标题】：How to use jquery with my Node.js EJS template?如何在我的 Node.js EJS 模板中使用 jquery？
【发布时间】：2020-05-19 17:43:24
【问题描述】：

情况：

我正在尝试使用我的 Node.js ejs 模板来实现这个问题的第一个答案（有 25 个赞成票）：How can I make an Upvote/Downvote button?。

所以我写了这段代码。

我的密码：

Main.js

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

$('.UpvoteButton').click(function () {
  $(this).toggleClass('on');
});

$('.DownvoteButton').click(function () {
  $(this).toggleClass('on');
});

style.css

.UpvoteButton {
    display: inline-block;
    overflow: hidden;
    width: 80px;
    height: 50px;
    margin-top: 15px;
    margin-right: 3px;
    cursor: pointer;
    background: url('/assets/UpvoteButtonSpriteSheet.png');
    background-position: 0 0px;
}

.DownvoteButton {
    display: inline-block;
    overflow: hidden;
    width: 80px;
    height: 50px;
    margin-top: 15px;
    margin-right: 3px;
    cursor: pointer;
    background: url('/assets/DownvoteButtonSpriteSheet.png');
    background-position: 0 0px;
}

.UpvoteButton.on {
  background-position: 0 50px;
}

.DownvoteButton.on {
  background-position: 0 50px;
}

index.ejs

<% include ../partials/header %>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div class ="containerMarginsIndex">

        <% for(var i=0; i < fun.length; i++) {%>
            <div class="fun">
                <h3 class="text-left"><%= fun[i].title %></h3>
                <a href="details/<%= fun[i].id %>">
                    <img class = "postImg" src="/images/uploads/<%= fun[i].image %>">
                </a>
                <span class="UpvoteButton"> </span><span class="DownvoteButton"> </span>

            </div>
        <% } %>

</div>
<% include ../partials/footer %>

问题：

单击时没有任何反应。图像保持不变。

问题：

我做错了什么？

【问题讨论】：

"with Node.js" - 究竟是什么意思？例如，您正在使用 Express 吗？你能粘贴你的源代码 - 作为浏览器生成和“看到”的源代码吗？
jQuery 可通过 NPM 用于 Node.js，但通常您不需要在服务器上使用它（或在客户端上）。网络服务器上没有文档，也没有任何可点击的内容，而且客户端通常没有 require，除非您使用的是 Browserify 或 Webpack。换句话说，你很可能做错了。
@adeneo 我正在使用 ejs 来呈现我的页面（正如 index.ejs 所建议的那样）。在我的 index.js 中，我有 2 个包含可点击图像的跨度。如前所述，我正在尝试复制链接答案中的行为。如果我做错了，请告诉我为什么以及如何纠正这种情况:) 谢谢！
@marcinrek 这意味着我只使用 npm 模块来呈现我的页面（我正在使用 ejs）。只是想在我的一个 ejs 文件中为 2 个跨度添加一些可点击的功能。 Express 是我正在使用的模块之一，是的。
jsfiddle.net/da1nk1s2

标签： javascript jquery css node.js

【解决方案1】：

您必须在 EJS 模板中包含 jQuery 和客户端脚本，以便在浏览器中呈现。

在Node中用npm安装jQuery，在服务端做var $ = require('jquery')，只是让你在服务端使用jQuery的一些方法，不包括客户端的jQuery。

将模板更改为类似

<% include ../partials/header %>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div class ="containerMarginsIndex">

        <% for(var i=0; i < fun.length; i++) {%>
            <div class="fun">
                <h3 class="text-left"><%= fun[i].title %></h3>
                <a href="details/<%= fun[i].id %>">
                    <img class = "postImg" src="/images/uploads/<%= fun[i].image %>">
                </a>
                <span class="UpvoteButton"> </span><span class="DownvoteButton"> </span>

            </div>
        <% } %>

</div>
<script>
    $('.UpvoteButton').click(function () {
      $(this).toggleClass('on');
      $('.DownvoteButton').removeClass('on');
    });

    $('.DownvoteButton').click(function () {
      $(this).toggleClass('on');
      $('.UpvoteButton').removeClass('on');
    });
</script>
<% include ../partials/footer %>

【讨论】：

【解决方案2】：

浏览器本身不支持 require 命令。您必须使用 webpack 或 browserify 之类的文件打包器才能在主 js 文件中包含“jquery.js”文件。

【讨论】：

不是我想要做的，但是谢谢！我会记住这一点。

【解决方案3】：

我在使用 ejs 作为“视图引擎”模板的 NodeJS 中遇到了类似的问题，并解决如下：

服务器端：

安装 jQuery 和 jsdom：

npm install jquery --save
npm install jsdom --save

要让 jQuery 在 Node 中工作，需要一个带有文档的窗口。由于 Node 中原生不存在这样的窗口，因此可以通过 jsdom 等工具进行模拟从 v10 开始，jsdom 有了新的 API，您可以在服务器端代码（即 app.js 或 index.js）中配置 jsdom，如下所示：
```
var jsdom = require("jsdom");
const { JSDOM } = jsdom;
const { window } = new JSDOM();
const { document } = (new JSDOM('')).window;
global.document = document;
var $ = require("jquery")(window);
```

客户端：

像往常一样在 ejs 模板中包含 jQuery 包（例如 header.ejs）：

<head>
    <title>Whatever App</title>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
</head>

那么你放到ejs文件里的js脚本就会毫无问题地渲染出来，比如你的情况就是把js脚本放到 index.ejs：

<script>
     $('.UpvoteButton').click(function () {
         $(this).toggleClass('on');
         $('.DownvoteButton').removeClass('on');
     });

     $('.DownvoteButton').click(function () {
         $(this).toggleClass('on');
         $('.UpvoteButton').removeClass('on');
     });
</script>

【讨论】：

我希望这个版本适合你。否则，您可以回滚到您的版本；）
但是，还是不能在 EJS 文件中使用来自外部文件的 JQUERY 吗？我写了一些 JQUERY，当它写在 .ejs 文件中时它工作得很好，但是一旦我将代码移动到 .js 文件中它就不起作用了。我还使用添加了脚本。在 .js 文件中我调用它： $(document).on('ready' , function() { .... });但它没有反应。当我在客户端调用它时。任何提示？谢谢！

【解决方案4】：

对不起，我的英语不好。
我知道这篇文章很旧，但我有同样的问题，我找到了解决方案。
可以使用外部 JQuery 文件。
它必须放在“公共”文件夹中。

有了这棵树：
应用程序.js
[意见]
index.ejs
[公众]
[包括]
jquery.min.js
函数_jquery.js

在“index.js”中使用此代码：

<script src="/include/jquery.min.js"></script>
<script src="/include/fonctions_jquery.js"></script>

在“application.js”中使用此代码

var express =   require('express');
var path    = require('path');

var appli = express();
appli.use(express.static(__dirname +path.sep+ 'public'));

它对我有用。

【讨论】：