如何有效地使用的onClick和EJS

问题描述 投票:3回答:1

我想基于onClick事件显示一个模式窗口

这就是我正在做的的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>

这是模态窗口

<% 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>
<%}%>
And this is my js file

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

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

我已经试过 一种。把展会功能在服务器端 湾把演出功能的客户端 C。许多不同的方式来使用,我在这里看到的onclick d。声明在客户端<% var number = false%>数量可变

没有什么工作对我来说。请没有任何人有任何想法

javascript node.js express onclick ejs
1个回答
3
投票

写在其中要求明确路径客户端秀功能:

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()">
© www.soinside.com 2019 - 2024. All rights reserved.