检查数组是否有值，如果没有则添加 class

Question

我有一个用 Jade 编写的类别名称列表。

ul
    li Discussion
    li Movie
    li Music
    li Performance
    li Dance
    li Theatre

我有一些 json，显示了向特定事件添加了哪些类别：

…
values: [
{
    ordinal: 50469,
    db_value: 626,
    id: 50469,
    value: "Discussion"
},
{
    ordinal: 50470,
    db_value: 623,
    id: 50470,
    value: "Dance"
}
],
…

我有一条获取类别值的路线：

res.render("event", {
            categories: data.result.properties.category.values
        })

我怎样才能达到这样的结果，if/else 检查值是否与 li 标签中的值相同，如果不相同，则添加 class.unactive json 数组中不存在：

<ul>
    <li>Discussion</li>
    <li class="unactive">Movie</li>
    <li class="unactive">Music</li>
    <li class="unactive">Performance</li>
    <li>Dance</li>
    <li class="unactive">Theatre</li>
</ul>

Answer 1

我会先将数据稍微调整为更容易呈现的格式，如下所示：

var _ = require('underscore');
var categoryNames = _.map(data.result.properties.category.values, function(value) {
    return value.value;
});

// categoryNames is an array like this: ['Discussion', 'Dance']

res.render("event", {
    categoryNames: categoryNames
})

现在您可以像这样获得您正在寻找的行为：

ul
  each category in categoryNames
    li category

但是如果你真的想保留 "disabled" 类别标签，你可以使用这样的内联条件来实现：

ul
  each category in ['Discussion', 'Movie', 'Music', 'Performance', 'Theatre']
    li(class=(categoryNames.indexOf(category) === -1) ? "" : "inactive") #{category}

Answer 2

首先，作为，我会简化数据格式。您可以在将它发送到模板之前在 Node 中执行此操作，或者在模板本身中使用一些 JS。我只会在这里编辑模板：

- categoryNames = categories.map(function(c){return c.value});

这将创建一个仅包含名称的数组。（而且，它甚至不需要 underscore.js。;））

现在，您可以使用 indexOf():

简单地检查给定名称是否在数组中

ul
    li(class=(categoryNames.indexOf("Discussion") > -1 ? "" : "inactive")) Discussion
    li(class=(categoryNames.indexOf("Movie") > -1 ? "" : "inactive")) Movie
    li(class=(categoryNames.indexOf("Music") > -1 ? "" : "inactive")) Music
    li(class=(categoryNames.indexOf("Performance") > -1 ? "" : "inactive")) Performance
    li(class=(categoryNames.indexOf("Dance") > -1 ? "" : "inactive")) Dance
    li(class=(categoryNames.indexOf("Theatre") > -1 ? "" : "inactive")) Theatre

检查数组是否有值，如果没有则添加 class

Check if array has a value, add class if doesn't

express

pug