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

Question

情况:

我正在尝试为这个问题实现第一个答案(有25个upvotes):我如何制作一个Upvote/Downvote按钮？使用我的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');
});

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

---

问题:

点击后没有任何反应.图像保持不变.

---

题:

我做错了什么？

Answer 1

您必须在EJS模板中包含jQuery和clientside脚本,因此它将在浏览器中呈现.

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