Node.js EJS 템플릿에 jquery를 사용하는 방법은 무엇입니까?

-2

상황 : 내 Node.js를의 EJS 템플릿 How can I make an Upvote/Downvote button? : 나는이 질문에 (25 upvotes와) 첫 번째 대답을 구현하기 위해 노력하고Node.js EJS 템플릿에 jquery를 사용하는 방법은 무엇입니까?

그래서이 코드를 작성했습니다.

MY CODE :

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

,174,

문제 : 내가 클릭하면

아무런 변화가 없습니다. 이미지는 동일하게 유지됩니다.

질문 :

내가 잘못 무슨 짓을?

출처

2016-10-23 Coder1000

같은에 대한 템플릿 - 정확히보다 무엇을 의미합니까? 예를 들어 익스프레스를 사용하고 있습니까? 소스 코드가 생성되고 브라우저에서 '본'것처럼 소스 코드를 붙여 넣을 수 있습니까? – marcinrek

jQuery는 NPM을 통해 Node.js에서 사용할 수 있지만 일반적으로 서버 * (또는 클라이언트와 관련하여) *에는 필요하지 않습니다. 웹 서버에는 아무 문서도없고, 클릭 할 것도없고, Browserify 나 Webpack을 사용하지 않는 한 고객 측에 보통 '요구'가 없습니다. 즉, 잘못했을 가능성이 가장 큽니다. – adeneo

@adeneo ejs를 사용하여 내 페이지를 렌더링하고 있습니다 (index.ejs가 제시하는대로). 내 index.js에는 클릭 가능한 이미지가 포함 된 2 개의 스팬이 있습니다. 말했듯이, 나는 연결된 대답에서 행동을 재현하려고합니다. 내가 잘못하고 있다면, 왜 그런 상황에 어떻게 대처할 수 있는지 말해주십시오 :) 고마워요! – Coder1000

jQuery와 clientside 스크립트를 EJS 템플릿에 포함시켜 브라우저에 렌더링해야합니다.

노드에 npm을 사용하여 jQuery를 설치하고 서버 측에서 var $ = require('jquery')을 수행하면 클라이언트 측에 jQuery가 포함되지 않고 서버 측에서 jQuery의 메소드 중 일부만 사용할 수 있습니다.

변경 "Node.js를 가진"

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

출처

2016-10-24 14:08:36 adeneo

브라우저는 require 명령을 기본적으로 지원하지 않습니다. 메인 js 파일에 "jquery.js"파일을 포함 시키려면 webpack과 같은 파일 번들을 사용하거나 browserify해야합니다.

출처

2016-10-23 21:41:16

내가 뭘 하려던 것이 아니라 감사합니다! 나는 이것을 명심 할 것이다. – Coder1000

당신은 환영합니다 :) –

Node.js EJS 템플릿에 jquery를 사용하는 방법은 무엇입니까?

답변

관련 문제