如何通過在帕格模板中設置變量來在按鈕單擊上顯示/隱藏預標籤

Question

我第一次使用帕格，並且在單擊按鈕時只能設置局部變量來顯示div。這是我試過的：

extends layout 

block content 
    script. 
    var something = function() { 
     var display = true; 
     console.log('hi', display); 
    } 
    button(href='#', type='button', onclick='something()') Get News Articles 
    if display === true 
    div.pre-space 
     pre 
     code #{jsonArticles} 

我在做什麼不正確？

Answer 1

請注意，只有當瀏覽器呈現網頁時，腳本標記中的Javascript纔會運行。

所有的Jade/Pug代碼都在服務器端運行，這會導致您的html網頁。

在您當前的情況下，您可以在帕格渲染div.pre-space並使用CSS隱藏它。然後你可以在該按鈕的點擊上使用Javascript顯示它。

延伸佈局

block content 
    script. 
    var something = function() { 
     document.querySelect("div.pre-space").style("display", "block"); 
    } 
    button(href='#', type='button', onclick='something()') Get News Articles 
    div.pre-space 
    pre 
     code #{jsonArticles} 

CSS：

div.pre-space{ display: none;}