我正在使用 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">×</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"]
});
}
希望我的想法能够顺利实现,任何帮助都会很棒。提前致谢!
最佳答案
模态代码有问题。
- 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 和信息?
如果您不知道我在说什么,请告诉我,我会编辑我的答案。
关于javascript - 在 Jade 和 Javascript 中动态创建具有不同 id 的模态,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/16972820/