Question

我正在使用Nodejs / Express / Jade / Bootstrap尝试创建一个库存系统，我点击地图上的一个房间（300个房间），然后出现一个模态（boostrap），其中包含一个项目列表房间（最终是一个CRUD）。虽然我完全有可能为每个房间创建一个不同的模态，然后为每个模态编写数据库查询，但我觉得我应该能够动态地完成它。理想情况下，我应该能够做类似

的事情

for room-number in school
  #school[room-number].modal.hide
    (insert substance)

但我无法让div id正常工作。显示的是

<#rm3 class="modal hide">
×
Room 3
some text

这是我到目前为止所拥有的。

school.jade

extends layout

block content
  .container
    .hero-unit
      h2 School
    .row-fluid
      .span12.pagination-centered.
        <img src="/images/School.jpg" usemap="#schoolmap">
        <map name="schoolmap">
          <area shape="rect" coords="264,276,332,310" href="#rm3" data-toggle="modal" />
        </map>


  - for (num in numbers)
    div#{numbers[num]}.modal.hide
      .modal-header
        | <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
        h2 Room 3
      .modal-body
        p some text

和index.js

exports.lb = function(req, res) {
  res.render('school', {
              title: 'Inventory', 
      "numbers": ["#rm3", "#rm4", "#rm5", "#rm6"]
});
}

希望我的想法很好，任何帮助都会很棒。提前谢谢！

Answer 1

模态代码存在问题。

 - for (num in numbers)
 .modal.hide(id="#{num}")
  .modal-header
    button.close(type="button", data-dismiss="modal", aria-hidden="true") x
    h2 Room 3
  .modal-body
    p some text

由于您在for（数字中为num），因此您不必从数字中获取数字。您可以直接访问num。

在Jade中，div的id属性通常使用＃设置，但在这种情况下，我怀疑## {num}是否有效，这就是为什么我选择将它作为括号中的属性。

我也冒昧地设置了关闭按钮的格式。

另一种方式是，为什么不为每个房间创建一个模态，为什么不构建一个将被加载的空模态（在调用时使用jQuery load function和信息？

如果您不知道我在说什么，请告诉我，我会编辑我的答案。

在Jade和Javascript中动态创建具有不同id的模态

1 个答案: