如何有效地使用 onClick 和 EJS

Question

我正在尝试显示基于 onClick 事件的模式 window

这是我执行 onClick 的地方

<div class = "post-content">
  <a onClick = "<%"show()"%>"> <h6><center> <%= imageData[0].title%></center> </h6> </a>
  <img src = "<%= imageData[o].associated_images[0].url%>">
  <center> <%= imageData[0].short_description%> </center>
</div>

这是模态window

<% if(number){%>
  <div class = "single-preview">
    <h6><center> <%= imageData[0].title%></center> </h6> 
      <center><img src="<%=imageData[0].associated_images[0].url%>"style="width:720px height:405px;"> </center>
      <center> <%= imageData[0].long_description%> </center>
      <button class = "close-button"> &#215; </button>
  </div>
<%}%>

这是我的 js 文件

router.get(name, function(req, res) {
  res.render('shows', {
    number: false
  });
});

基本上我试图在调用 show() 时更改变量 number 的值。

我试过的
一个。将显示功能放在服务器端
b.将显示功能放在客户端
C。我在这里看到的许多不同的使用 onclick 的方法
d.在客户端声明数字变量 <% var number = false%>

没有什么对我有用。请问大家有什么想法吗

Answer 1

在客户端编写一个调用快速路由的显示函数：

function show(){
$( "#yourmodal" ).load( "/showmodalroute" );
}

调用onClick中的函数:

<a onClick = "show()">

快递路线：

router.get("/showmodalroute", function(req, res) {
  res.render('shows', {
    number: false
  });
});

如果你使用 JQuery 事情会更容易。（JQuery 是一个 javascript 库。）在普通的 javascipt 中，您必须进行 http 调用：

function show()
{
    var xmlhttp=new XMLHttpRequest();
    xmlhttp.onreadystatechange=function()
    {
        if (xmlhttp.readyState==4 && xmlhttp.status==200)
        {
        document.getElementById('yourmodal').innerHTML=xmlhttp.responseText;
        }
    }
 xmlhttp.open("GET","/showmodalroute",true);
 xmlhttp.send();
}

html:

<a onClick = "show()">

如何有效地使用 onClick 和 EJS

How to effectively use onClick and EJS

javascript

onclick

ejs

node.js

express