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>

我们的想法是能够点击药丸和＃34;财务＆＃34;，只有那些包含＆＃34;财务＆＃34;将显示其hashtag类，并隐藏所有其他项。我已经尝试过根据内容搜索如何过滤/切换，但似乎无法找到任何内容。到目前为止，这是我的JS，它只能切换药丸样式的活动/非活动类：

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

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

Answer 1

这是一个完整的例子。我在代码中添加注释

＆＃13;

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

＆＃13;

.active {
  background-color:green;
}

.inactive {
  background-color:red;
}

＆＃13;

<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>

＆＃13;

Answer 2

我想我理解你的问题，首先，隐藏所有.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();
            }
        });
    });
});

Answer 3

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

在html中，您可以添加一些自定义属性，例如数据，这些属性非常有用。

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>

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

3 个答案: