Question

我的html页面上有一个元素列表（DIV），如下所示。

同一页面上有一个主题标签列表。

我需要在用户点击主题标签（例如#bacteria）时，只显示包含该主题标签的那些DIV。

实现这一目标的最轻量级和最简单的方法是什么？

<div class='entry'>
    <p>#antibiotics destroy #e-coli and that&#39;s not good!!!!</p>
    <!-- Hashtags: #antibiotics #eColi -->
    <!-- UID: 755a2a60-972e-11e3-a464-872f2fc4dea2 -->
</div>

<div class='entry'>
    <p>#bacteria can be #friendly, such as #e-coli for example</p>
    <!-- Hashtags: #bacteria #friendly #eColi -->
    <!-- UID: 6cc66d00-972e-11e3-a464-872f2fc4dea2 -->
</div>

<div class='entry'>
    <p>#antibiotics can fight #bacteria</p>
    <!-- Hashtags: #antibiotics #bacteria -->
    <!-- UID: b37992c0-9686-11e3-8b2c-c97ae6645b3b -->
</div>

我知道Angular对于这种东西很有用，但我想使用轻量级的东西。也许可以用jQuery或其他东西来做...

仅供参考，整个事情在带有EJS渲染的Node.Js / Express.Js上运行。

谢谢！

更新

假设现在我需要检查几个主题标签。就好像contains变量不是字符串而是数组一样，我只需要显示包含所有数组值的条目。我该如何更改代码？试图做到这一点，但无法管理......非常感谢你！

Answer 1

理想情况下，您可以将哈希标记数据合并到div本身中......也许使用data- *属性：

<div class='entry' data-hashtags='antibiotics bacteria'>

然后通过jQuery，你可以循环隐藏那些不匹配的东西：

var clickedHashtag = x //get the clicked on hashtag however you like

$('.entry').each(function(){
    if($(this).data('hashtags').indexOf(clickedHashtag)>=0){
        $(this).hide()
    }
})

小提琴：http://jsfiddle.net/Jz3gZ/

Answer 2

使用:contains jquery selector

$(document).ready(function(){
    $('.entry').hide();
    $('.links').on('click','a',function(e){
        var $ctx = $(e.target);
        var contains = $ctx.text();
        $('.entry').hide();
        $('.entry:contains('+contains+')').show();
        return false;
    });    
});

示例：http://jsfiddle.net/LA3tD/

修改

你可以使用带有逗号的文本然后拆分，或者将数据属性与某个分隔符一起使用，然后将其拆分为一个连续的过滤器选择器

$(document).ready(function(){ $('.entry').hide(); $('.links').on('click','a',function(e){ var $ctx = $(e.target); var contains = $ctx.text(); $('.entry').hide(); if(contains.indexOf(',')!=-1){ var tags = contains.split(','); var filt = ''; $.each(tags,function(i,el){ filt += ':contains('+el+')'; }); // :contains can be concatenated multiple times f.e.: ":contains(foo):contains(bar)" $('.entry'+filt).show(); }else{ $('.entry:contains('+contains+')').show(); }; return false; }); });

更新了示例：http://jsfiddle.net/LA3tD/1/

Answer 3

未测试：

$('.entry').each(function(item) { $(item).show($item.is('.' + hashtag)); });

您必须将主题标签添加为类：

<div class="entry antibiotics">

在Javascript中过滤数据

3 个答案: