Javascript 如何将jquery与my Node.js EJS模板一起使用？

情况：

我试图实现这个问题的第一个答案（25票赞成）：使用Node.js ejs模板

所以我写了这段代码

---

我的代码：

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');
});

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

---

问题：

当我点击时什么也没发生。图像保持不变

---

问题：

---

我做错了什么？

浏览器本机不支持require命令。为了在主js文件中包含“jquery.js”文件，您必须使用webpack或browserify等文件绑定器。

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

在节点中使用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 %>

$（'.UpvoteButton'）。单击（函数（）{
$（this.toggleClass（'on'）；
$（'.DownvoteButton'）.removeClass（'on'）；
});
$（'.DownvoteButton'）。单击（函数（）{
$（this.toggleClass（'on'）；
$（'.UpvoteButton'）.removeClass（'on'）；
});

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

服务器端：

安装jQuery和jsdom：

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

要使jQuery在节点中工作，需要一个包含文档的窗口。由于节点中本机不存在这样的窗口，因此可以使用诸如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）：

任何应用程序

然后，您放入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>

$（'.UpvoteButton'）。单击（函数（）{
$（this.toggleClass（'on'）；
$（'.DownvoteButton'）.removeClass（'on'）；
});
$（'.DownvoteButton'）。单击（函数（）{
$（this.toggleClass（'on'）；
$（'.UpvoteButton'）.removeClass（'on'）；
});

---

请原谅我的英语。
我知道这篇文章很旧，但我也有同样的问题，我找到了解决办法。
可以使用外部JQuery文件。
必须将其置于“公用”文件夹中。

使用此树：
application.js
[视图]
index.ejs
[公共]
[包括]
jquery.min.js
fontions_jquery.js

使用“index.js”中的代码：

---

它对我很有用。

“with Node.js”-比到底意味着什么？例如，您正在使用Express？您可以将源代码粘贴到浏览器生成并“看到”的源代码中吗？jQuery可通过NPM用于Node.js，但通常不需要在服务器上（或在客户端上）。Web服务器上没有文档，也没有任何可点击的内容，客户端通常没有

require

，除非您使用的是Browserify或Webpack。换句话说，您很可能做错了。@adeneo我正在使用ejs呈现我的页面（正如index.ejs所建议的）。在我的index.js中，我有两个跨距，其中包含可单击的图像。如前所述，我试图复制链接答案中的行为。如果我做错了，请告诉我为什么以及如何补救：）谢谢@marcinrek这意味着我专门使用npm模块来呈现我的页面（我使用的是ejs）。只是想在我的一个ejs文件中的2个跨距中添加一些可单击的功能。Express是我正在使用的模块之一，是的。不是我想要做的，但是谢谢！我会记住这一点。我希望这个版本适合你。否则，您可以回滚到您的版本；）但是，仍然不可能从EJS文件中的外部文件使用JQUERY？我编写了一些JQUERY，当我将它写到.ejs文件中时，它工作得非常好，但是一旦我将代码移到.js文件中，它就不工作了。我还添加了脚本。在.js文件中，我用：$（document.on（'ready'，function（）{……}）调用它；但它没有反应。当我在客户端调用它时。有小费吗？非常感谢。

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

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

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

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

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

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