如何根据关键字过滤器切换 div 的可见性

Question

我有一些包含不同关键字的卡片的 HTML：

<div class="item">
    <div class="hashtags">
        <span><a href="#">Healthcare</a></span>
        <span><a href="#">Mobility</a></span>
    </div>
</div>
<div class="item">
    <div class="hashtags">
        <span><a href="#">Finance</a></span>
        <span><a href="#">Mobility</a></span>
    </div>
</div>

...还有一些可以打开/关闭的药丸的 HTML：

<div class="hashtags">
    <span class="active"><a href="#">Finance</a></span>
    <span class="inactive"><a href="#">Healthcare</a></span>
    <span class="inactive"><a href="#">Managed Services</a></span>
    <span class="inactive"><a href="#">Mobility</a></span>
</div>

这个想法是为了能够点击“财务”的药丸，只有那些在其标签类别中包含“财务”的项目才会显示，而所有其他项目都被隐藏。我试过搜索如何根据内容过滤/切换，但似乎还找不到任何东西。到目前为止，这是我的 JS，它只切换药丸样式的活动/非活动类：

    $('.hashtags>span').click(function() {
    $(this).toggleClass('inactive');
    $(this).toggleClass('active');
    });

我知道有一种方法可以在 JS 或 jQuery 中查找 HTML 和比较字符串……但不确定这是最好的方法。任何建议表示赞赏。非常感谢！

Answer 1

这是一个完整的例子。我将 cmets 添加到代码中

$('.hashtags > span').on('click', function(e) {
  e.preventDefault();
  // first we store value
  var storedValue = $(this).text();
  // send it to a function
  highlightHashtag(storedValue);
});


var highlightHashtag = function(value) {
  // iterate through all
  $('.hashtags > span').each(function() {
    if($(this).text() !== value) {
      //  if doesnt match, inactive
      $(this).removeClass('active');
      $(this).addClass('inactive');
    } else {
      $(this).removeClass('inactive');
      $(this).addClass('active');
    }
  });
  
};

.active {
  background-color:green;
}

.inactive {
  background-color:red;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<div class="item">
    <div class="hashtags">
        <span><a href="#">Healthcare</a></span>
        <span><a href="#">Mobility</a></span>
    </div>
</div>
<div class="item">
    <div class="hashtags">
        <span><a href="#">Finance</a></span>
        <span><a href="#">Mobility</a></span>
    </div>
</div>

Answer 2

在我看来，如果您在 html 中添加一些自定义标签会更好。看看我的简单示例：

在 html 中，您可以添加一些自定义属性，例如 data-一些非常有用的东西。

CSS 只高亮哪个类在哪个对象上

您可以在此处尝试我的代码或在 JSFiddle https://jsfiddle.net/w19ytk8p/ 上查看它

$('.hashtags>span').click(function() {
    $(this).toggleClass('inactive');
    $(this).toggleClass('active');
    var tag = $(this).attr("data-tag");
    var related = [];
    $('.hashtags').each(function(index){
        $(this).children( "span" ).removeClass("active");
        $(this).children( "span" ).addClass("inactive");
    	if($(this).attr("data-tag") !== undefined && $(this).attr("data-tag").indexOf(tag)>-1) {related.push(this);}
    });
    $(related).each(function(){
    	$(this).children( "span" ).removeClass("inactive");
        $(this).children( "span" ).addClass("active");
    });
});

.inactive > a{
    color: red;
}
.active > a{
    color: blue;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="item">
    <div class="hashtags" data-tag="healthcare finance">
        <span><a href="#">Healthcare</a></span>
        <span><a href="#">Mobility</a></span>
    </div>
</div>
<div class="item">
    <div class="hashtags"  data-tag="finance mobility">
        <span><a href="#">Finance</a></span>
        <span><a href="#">Mobility</a></span>
    </div>
</div>

<div class="hashtags">
    <span class="active"  data-tag="finance"><a href="#">Finance</a></span>
    <span class="inactive"  data-tag="healthcare"><a href="#">Healthcare</a></span>
    <span class="inactive"  data-tag="managedServices"><a href="#">Managed Services</a></span>
    <span class="inactive"  data-tag="mobility"><a href="#">Mobility</a></span>
</div>

Answer 3

我想我理解您的问题，首先，隐藏所有 .items，然后显示所有 .items，并带有包含您选择的文本的标签。 像这样（未经测试）

最终解决方案

$('.hashtags>span').unbind('click').click(function() {
    var text = $(this)
            .toggleClass('inactive')
            .toggleClass('active');
    var items = $('.item').hide();
    $('.hashtags>span.active').each(function(){
        var t = $(this).find('a:first').text() ;
        items.each(function(){
            var i = $(this);
            //find all items containing a a with the activated hashtag text
            if(i.find('.hashtags>span>a:contains(\'' + t + '\')').length > 0) {
                i.show();
            }
        });
    });
});