根据从MongoDB中获取的玉数据中找到的字母显示列表

问题描述

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

现在我想根据字母显示品牌。

我希望当我点击一个字母'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 
  

我使用此代码显示品牌

 对于数据中的每个品牌
 h4品牌 - ＃{brand.brand_name} 
  

我得到的品牌如

 品牌 -  a 
品牌 -  b 
品牌 -  c 
  

解决方案

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

  .brands 
用于每个品牌的数据
 h4（name = brand.brand_name）brand-＃{brand。然后将 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（）; 
} 
}）; 
 
}）
  

这是wor国王片段：

I sent my data to pug file as data.brand_name to show all brand

Now i want to show the brands according to alphabets.

I want when i click on a letter 'a' then it only show a list which has starting letter 'a'

I don't got how to do this,please help me.

EDIT 1

my pug file for aplhabet is like this

 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

I am using this code to display brands

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

i get brands like

brand - a
brand - b
brand - c

解决方案

You can jQuery to achive your goal. But first of all you need to add a additional class for parent div of brand names (in this case I used .brands) and add an attribute for h4 element to store brand names.

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

Then include jQuery to your page and use following script after page load.

$(".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();
        }
    });

})

Here is working snippet : https://codepen.io/anon/pen/ZavPNo

这篇关于根据从MongoDB中获取的玉数据中找到的字母显示列表的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！