在jade里用script标签写Nodejs的js代码貌似没有被加载，求指点！

在jade里用script标签写Nodejs的js代码貌似没有被加载，求指点！

想使用bootstrap的自动转换标签页active属性的js方法，结果发现似乎在jade里写的script代码无效，无奈加了一些alert做测试，果真没反应。我在script标签后面加了个 . 不然会报错。请问jade里到底要怎么用script标签呢？急！（代码如下）

  1 doctype html
  2 html
  3   head
  4     include ../layout/head
  5     script(type='text/javascript').
  6       $(document).ready(function() {
  7         alert('kdididididi');
  8         $('#tabs a:first').tab('show');
  9 
 10         $('#tabs a').click(function (e) {
 11           e.preventDefault();
 12           $(this).tab('show');
 13         };
 14 
 15         $('#btn1').click(function() {
 16           alert('aaaa');
 17         };
 18       });
 19   body
 20     include ../layout/body
 21     .container
 22       ul#tabs.nav.nav-tabs
 23         li
 24           a(href='#') Home
 25         li
 26           a(href='#') JJJkk
 27         li.dropdown
 28           a.dropdown-toggle(data-toggle='dropdown' href='#') MyBlog
 29             span.caret
 30             ul.dropdown-menu
 31               li
 32                 a(href='/blog/read') Read
 33               li
 34                 a(href='/blog/write') Write
 \n```

3 回复

当然可以。根据你的描述，问题可能在于Jade模板引擎中的script标签使用方式以及JavaScript代码的语法错误。下面是一个修改后的示例，并解释了如何正确使用script标签和修正语法错误。

修改后的Jade模板代码

doctype html
html
  head
    include ../layout/head
    script(type='text/javascript').
      $(document).ready(function() {
        alert('kdididididi');
        $('#tabs a:first').tab('show');

        $('#tabs a').click(function (e) {
          e.preventDefault();
          $(this).tab('show');
        });

        $('#btn1').click(function() {
          alert('aaaa');
        });
      });
  body
    include ../layout/body
    .container
      ul#tabs.nav.nav-tabs
        li
          a(href='#') Home
        li
          a(href='#') JJJkk
        li.dropdown
          a.dropdown-toggle(data-toggle='dropdown' href='#') MyBlog
            span.caret
            ul.dropdown-menu
              li
                a(href='/blog/read') Read
              li
                a(href='/blog/write') Write

解释

  1. 语法修正：

    • 在原始代码中，第13行和第17行的括号没有正确闭合。正确的闭合应该是)而不是;。
    • 修正后的代码中，闭合括号已经正确放置。

  2. 正确使用script标签：

    • 使用.script(type='text/javascript').语法来插入内联JavaScript代码。
    • 这样可以确保代码被正确解析并插入到HTML文档的<head>部分。

  3. jQuery库引用：

    • 确保在head部分引入了jQuery库。如果还没有引入，可以在head部分添加以下行：
      script(src='https://code.jquery.com/jquery-3.6.0.min.js')

通过以上修改，你应该能够正确地在Jade模板中使用script标签并执行JavaScript代码。


问题已解决，是我的一个方法没有写 ’ } '，汗～～～纠结了一晚上

在Jade模板引擎中，script标签内的JavaScript代码需要正确地格式化，否则可能会导致语法错误或代码无法执行。从你的代码来看，有几个地方需要注意：

  1. 语法错误：你的代码中存在一些语法错误，比如缺少闭合的括号和花括号。
  2. 正确的语法：在Jade中，使用.后跟缩进表示代码块。

以下是修正后的代码示例：

doctype html
html
  head
    include ../layout/head
    script(type='text/javascript').
      $(document).ready(function() {
        alert('kdididididi');
        $('#tabs a:first').tab('show');

        $('#tabs a').click(function (e) {
          e.preventDefault();
          $(this).tab('show');
        }); // 注意这里多了个分号

        $('#btn1').click(function() {
          alert('aaaa');
        }); // 注意这里多了个分号
      });

  body
    include ../layout/body
    .container
      ul#tabs.nav.nav-tabs
        li
          a(href='#') Home
        li
          a(href='#') JJJkk
        li.dropdown
          a.dropdown-toggle(data-toggle='dropdown' href='#') MyBlog
            span.caret
            ul.dropdown-menu
              li
                a(href='/blog/read') Read
              li
                a(href='/blog/write') Write

解释

  • 确保每个函数和事件处理程序都正确闭合。
  • 在click事件处理程序的最后加上分号来结束语句。
  • 使用.container和.nav等Bootstrap类来确保标签页能够正常工作。

如果问题仍然存在，建议检查是否正确引入了jQuery和Bootstrap的CSS/JS文件，并且确保页面中的元素在DOM加载完成时已经存在。

回到顶部