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

Question

我正在使用 Nodejs/Express/Jade/Bootstrap 尝试创建一个库存系统，在该系统中，我单击 map 上的一个房间(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

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

学校. 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 in numerics) 中，因此您不必从数字中获取 num 。您可以直接访问 num。

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

我也冒昧地格式化了您的关闭按钮。

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

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