根据从 mongodb 检索的 jade 数据中点击的字母显示列表

Question

我将我的数据作为 data.brand_name 发送到 pug 文件以显示所有品牌

现在我想按字母显示品牌。

我希望当我点击一个字母 'a' 时它只显示一个包含起始字母 'a'

的列表

我不知道该怎么做，请帮助我。

编辑 1

我的 aplhabet 哈巴狗文件是这样的

 div.row
                            div.drug_alphabets.pull-left
                                span.center
                                    ul
                                        li
                                            a.btn2.hoverable(href='#') A
                                        li
                                            a.btn2.hoverable(href='#') B
                                        li
                                            a.btn2.hoverable(href='#') C
                                        li
                                            a.btn2.hoverable(href='#') D

我正在使用此代码显示品牌

   for each brand in data   
      h4 brand- #{brand.brand_name}

我得到像

这样的品牌

brand - a
brand - b
brand - c

Answer 1

您可以jQuery来实现您的目标。但首先你需要为品牌名称的父 div 添加一个额外的 class （在这种情况下我使用 .brands）并为 [=23= 添加一个 attribute ]h4 元素存储品牌名称。

.brands
    for each brand in data   
        h4(name=brand.brand_name) brand- #{brand.brand_name}

然后将 jQuery 添加到您的页面，并在页面加载后使用以下脚本。

$(".drug_alphabets a").on("click", function() {

    var clickedLetter = $(this).text()

    $(".brands h4").each(function() {
        var brandName = $(this).attr("name")
        if (brandName && brandName.toLowerCase()[0] == clickedLetter.toLowerCase()) {
            $(this).show();
        } else {
            $(this).hide();
        }
    });

})

这是工作片段：https://codepen.io/anon/pen/ZavPNo

根据从 mongodb 检索的 jade 数据中点击的字母显示列表

show list according to the letter clicked in jade data retrieve from mongodb

html

javascript

node.js

mean-stack

pug