如何有效利用的onClick和EJS

Question

我試圖顯示基於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> 
 
<%}%>

這個我我的JS文件

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

基本上我試圖改變變量number的值時show()被調用。

我試過的是什麼
a。將顯示功能放在服務器端
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的事情會變得easy.JQuery是JavaScript庫,,, 疼痛javascipr你必須使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()">