NodeJS 如何从pug模板访问按钮?

zbsbpyhn  于 2023-06-05  发布在  Node.js
关注(0)|答案(1)|浏览(203)

我不能在pug模板的index.js中使用button。我在我的pug模板中得到了以下代码:

doctype html
html
  head 
    meta(charset='UTF-8')
    meta(http-equiv='X-UA-Compatible' content='IE=edge')
    meta(name='viewport' content='width=device-width, initial-scale=1.0')
    title= subject[0].name
    link(rel='preconnect' href='https://fonts.googleapis.com')
    link(rel='preconnect' href='https://fonts.gstatic.com' crossorigin='')
    link(href='https://fonts.googleapis.com/css2?family=Montserrat:wght@100;200;300;400;600;700&display=swap' rel='stylesheet')
    link(rel='stylesheet' , href='https://cdn.jsdelivr.net/npm/@fortawesome/fontawesome-free@6.2.0/css/fontawesome.min.css')
    style 
      include ../public/style.css
    
  body
    section.courses-background
      nav.nav
        a(href='/')
          img(src='../pictures/logo.jpg' alt='logo')
        #navLinks.nav-links
          svg.icon(xmlns='http://www.w3.org/2000/svg' viewbox='0 0 512 512' onclick='hideMenu()')
            path(d='M256 512c141.4 0 256-114.6 256-256S397.4 0 256 0S0 114.6 0 256S114.6 512 256 512zM175 175c9.4-9.4 24.6-9.4 33.9 0l47 47 47-47c9.4-9.4 24.6-9.4 33.9 0s9.4 24.6 0 33.9l-47 47 47 47c9.4 9.4 9.4 24.6 0 33.9s-24.6 9.4-33.9 0l-47-47-47 47c-9.4 9.4-24.6 9.4-33.9 0s-9.4-24.6 0-33.9l47-47-47-47c-9.4-9.4-9.4-24.6 0-33.9z')
          ul
            li
              a(href='/') HOME
            li
              a ABOUT US
            li
              a(href='/loginSignup') LOGIN/SIGNUP
            li 
              a(href='/subjects') Subjects
            li
              a CONTACT
        //-i.fa.fa-bars(onclick='showMenu()')
        svg.icon(xmlns='http://www.w3.org/2000/svg' viewbox='0 0 448 512' onclick='showMenu()')
          path(d='M0 96C0 78.3 14.3 64 32 64H416c17.7 0 32 14.3 32 32s-14.3 32-32 32H32C14.3 128 0 113.7 0 96zM0 256c0-17.7 14.3-32 32-32H416c17.7 0 32 14.3 32 32s-14.3 32-32 32H32c-17.7 0-32-14.3-32-32zM448 416c0 17.7-14.3 32-32 32H32c-17.7 0-32-14.3-32-32s14.3-32 32-32H416c17.7 0 32 14.3 32 32z')
      .text-box
        h1= subject[0].name 
        p= subject[0].summary
    // subjects
    section.course
      p= subject[0].description
      .subject
        button.sbt-enroll(subject-data-slug=`${subject[0].slug}` ) enroll

  script(src='/js/bundle.js')

最后,我定义了一个按钮,在点击时应该调用index.js文件中的applySubject函数:

let subjectBtn = document.querySelector(".sbt-enroll");
if (subjectBtn) {
  //console.log("in applying function");
  subjectBtn.addEventListener("click", (e) => {
    e.preventDefault();
    const { subject } = e.target.dataset; // e.target is button which was clicked
    applySubject(subject);
  });
}

当我点击按钮时,什么也没有发生。
我从pug使用的其他按钮工作正常,我可以在index.js文件中使用它们。我也使用bundle,如果它改变了什么。

x6yk4ghg

x6yk4ghg1#

我认为数据集属性的工作方式不同(mdn dataset
属性应该以data开头:
哈巴狗:

button.sbt-enroll(data-subject-slug=`${subject[0].slug}`) enroll

js:

const { subjectSlug } = e.target.dataset;
applySubject(subjectSlug);

相关问题